[英]On row select in antd table the checkbox is not checking in react
我正在使用antd
表在表中查看表格式的数据。 我已经使用rowSelection
选择行。
单击复选框列时,未设置复选框,但事件正在生成。
class AppUser extends Component {
state = {
mockTableData: null,
selectedRowKeys: []
};
constructor(props) {
super(props);
}
componentDidMount() {
const apiURL = `${api_URL}/locations`;
axios.get(apiURL).then(res => {
this.setState({ mockTableData: res.data });
this.setState({ loading: false });
});
}
onExpand = (expanded, record) => {
console.log("onExpand", expanded, record);
};
onSelect = (record, selected, selectedRows, nativeEvent) => {
console.log(record, selected, selectedRows, nativeEvent);
};
render() {
const rowSelection = {
selectedRowKeys: [],
onChange: this.onSelect
};
return (
<div>
<HeaderComponent />
<h1>App user Component</h1>
<Tabs>
<TabPane tab="App-User" key="1">
<Table
columns={columns}
rowSelection={rowSelection}
expandedRowRender={(record, index, indent, expanded) =>
expanded ? <p>extra: {record.location_name}</p> : null
}
onExpand={this.onExpand}
dataSource={this.state.mockTableData}
/>
</TabPane>
<TabPane tab="Non-App-User" key="2">
<h2>2nd Tab</h2>
</TabPane>
</Tabs>
</div>
);
}
}
export default AppUser;
不知道我要去哪里错了。
在每个渲染上,您都重新定义rowSelection
(因为render()
的主体在每个渲染上执行),将其移至类实例/状态(并相应地使用this.rowSelection
/ this.state.rowSelection
)。
class AppUser extends Component {
rowSelection = {
selectedRowKeys: [],
onChange: this.onSelect
};
...
render() {
return (
<div>
...
<Tabs>
<TabPane tab="App-User" key="1">
<Table
rowSelection={this.rowSelection}
...
/>
</TabPane>
...
</Tabs>
</div>
);
}
}
export default AppUser;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.