## 自定義按鈕
1. 自定義按鈕提供兩種入口：`renderLeftButton` 、`renderRightButton`，我們來嘗試下是否可以生成
2. 我們加入如下代碼
~~~
test = () => {
console.log("測試按鈕生成")
}
renderLeftButton = () => (
<Button icon="tool" onClick={this.test}>
測試
</Button>
);
~~~
3. 在Grid組件中增加屬性：`renderLeftButton={this.renderLeftButton}`
~~~
<Grid
code={code}
..............
renderLeftButton={this.renderLeftButton}
..............
/>
~~~
4. 打開系統查看，發現多了一個按鈕，并且點擊后也執行了自定義的方法
5. 將其修改為`renderRightButton`，打開系統發現同樣的效果，只不過按鈕到了最右邊
## 自定義按鈕獲取表格信息
1. 修改 state
~~~
state = {
data: {},
selectedRows: [],
};
~~~
2. 增加表格點擊事件，將所選行數據加入state中
~~~
onSelectRow = rows => {
this.setState({
selectedRows: rows,
});
};
getSelectKeys = () => {
const { selectedRows } = this.state;
return selectedRows.map(row => row.id);
};
~~~
3. 強化按鈕點擊事件
~~~
test = () => {
const keys = this.getSelectKeys();
if (keys.length === 0) {
message.warn('請先選擇一條數據!');
} else {
console.log(`已選擇數據id：${keys}`);
}
}
~~~
4. Grid組件增加參數`onSelectRow={this.onSelectRow}`
~~~
<Grid
code={code}
..............
onSelectRow={this.onSelectRow}
..............
/>
~~~
5. 未選中數據的時候，點擊按鈕發現提示先選擇一條數據
6. 選中數據后點擊按鈕查看控制臺發現已經將對應的id打印了出來
7. Grid組件默認每次加載列表頁會默認執行一次`handelSearch`方法，所以我們可以刪掉`componentWillMount`方法，無需重復寫代碼。
## 后記
到這里整個列表頁的基礎講解就結束了，相信大家多看示例模塊的寫法，定能熟練掌握
最后附上列表頁的完整代碼
~~~
import React, { PureComponent } from 'react';
import { Button, Col, Form, Input, message, Row } from 'antd';
import Grid from '../../../components/Sword/Grid';
import Panel from '../../../components/Panel';
import { list } from '../../../services/demo';
const FormItem = Form.Item;
@Form.create()
class Demo extends PureComponent {
state = {
data: {},
selectedRows: [],
};
onSelectRow = rows => {
this.setState({
selectedRows: rows,
});
};
getSelectKeys = () => {
const { selectedRows } = this.state;
return selectedRows.map(row => row.id);
};
// ============ 查詢 ===============
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,
},
},
});
});
};
// ============ 查詢表單 ===============
renderSearchForm = onReset => {
const { form } = this.props;
const { getFieldDecorator } = form;
return (
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={6} sm={24}>
<FormItem label="標題">
{getFieldDecorator('title')(<Input placeholder="請輸入標題" />)}
</FormItem>
</Col>
<Col>
<div style={{ float: 'right' }}>
<Button type="primary" htmlType="submit">
查詢
</Button>
<Button style={{ marginLeft: 8 }} onClick={onReset}>
重置
</Button>
</div>
</Col>
</Row>
);
};
test = () => {
const keys = this.getSelectKeys();
if (keys.length === 0) {
message.warn('請先選擇一條數據!');
} else {
console.log(`已選擇數據id：${keys}`);
}
}
renderLeftButton = () => (
<Button icon="tool" onClick={this.test}>
測試
</Button>
);
render() {
const code = 'demo';
const { data } = this.state;
const { form, loading } = this.props;
const columns = [
{
title: '標題',
dataIndex: 'title',
},
{
title: '內容',
dataIndex: 'content',
},
{
title: '時間',
dataIndex: 'date',
},
];
return (
<Panel>
<Grid
code={code}
form={form}
onSearch={this.handleSearch}
onSelectRow={this.onSelectRow}
renderSearchForm={this.renderSearchForm}
renderLeftButton={this.renderLeftButton}
loading={loading}
data={data}
columns={columns}
/>
</Panel>
);
}
}
export default Demo;
~~~