## 加入查询功能
1. 有了列表页，自然缺不了的就是查询功能，下面我们来加入这个功能
2. 为了让查询更加真实，我们稍稍改造下mock中的`getFakeList`返回
~~~
function getFakeList(req, res) {
const json = { code: 200, success: true, msg: '操作成功' };
if (req.query.title === '测试标题1') {
json.data = {
total: 1,
size: 10,
current: 1,
searchCount: true,
pages: 1,
records: [
{
id: '1',
title: '测试标题1',
content: '测试内容1',
date: '2018-05-08 12:00:00',
},
],
};
} else if (req.query.title === '测试标题2') {
json.data = {
total: 1,
size: 10,
current: 1,
searchCount: true,
pages: 1,
records: [
{
id: '2',
title: '测试标题2',
content: '测试内容2',
date: '2018-06-08 12:00:00',
},
],
};
} else {
json.data = {
total: 3,
size: 10,
current: 1,
searchCount: true,
pages: 1,
records: [
{
id: '1',
title: '测试标题1',
content: '测试内容1',
date: '2018-05-08 12:00:00',
},
{
id: '2',
title: '测试标题2',
content: '测试内容2',
date: '2018-06-08 12:00:00',
},
{
id: '3',
title: '测试标题3',
content: '测试内容3',
date: '2018-07-08 12:00:00',
},
],
};
}
return res.json(json);
}
~~~
3. 在`componentWillMount`方法下增加`handleSearch`，传入参数重新调用接口进行查询返回
~~~
handleSearch = params => {
list(params).then(response => {
this.setState({
data: {
list: response.data.records,
pagination: {
total: response.data.total,
current: response.data.current,
pageSize: response.data.size,
},
},
});
});
};
~~~
4. 打开系统，输入`测试标题1`后点击查询，发现列表刷新成功
5. 点击重置按钮，列表又回归原样
6. 这样一来，一个简单的查询列表就做好了，未来只需将mock数据源换成真实的服务端api即可，无需再次开发，非常方便