## 加入查詢功能
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即可，無需再次開發，非常方便