## 自定义按钮
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;
~~~