在参与项目的过程中遇到了一个小问题,因为刚入门React没多久,这个问题困扰了我许久:
class CommentM extends React.Component {
constructor(props) {
super(props);
this.deleteCommentBtnClick = this.deleteCommentBtnClick.bind(this);
}
deleteCommentBtnClick() {
confirm({
okText: '删除',
cancelText: '取消',
content: '是否确定删除2条评论?',
onOk() {
console.log('OK');
},
onCancel() {
console.log('Cancel');
},
});
}
render() {
return (
<React.Fragment>
<BreadcrumbCustom first="鱼群管理" second="评论管理" />
<div>
<Card title="评论管理">
<div>
<Button
type="primary"
onClick={this.deleteCommentBtnClick}
style={{ marginLeft: '24px', marginTop: '24px', marginRight: '10px' }}
>
删除评论
</Button>
第 1 条到第 2 条,共 2 条 每页显示
<Select
defaultValue="10"
onChange={this.handleChange}
style={{ width: '65px', marginLeft: '10px', marginRight: '10px' }}
>
<Option value="10">10</Option>
<Option value="20">20</Option>
<Option value="50">50</Option>
</Select>
条
</div>
<div>
<Row gutter={16}>
<Col className="gutter-row" md={24}>
<div className="gutter-box">
<Card bordered={false}>
<SelectTable
ref={(SelectTable) => { this.SelectTable = SelectTable }}
/>
</Card>
</div>
</Col>
</Row>
</div>
</Card>
</div>
</React.Fragment>
);
}
}
以上是父组件中删除按钮部分的代码
class SelectTable extends React.Component {
state = {
selectedRowKeys: [], // Check here to configure the default column
};
onSelectChange = (selectedRowKeys) => {
console.log('selectedRowKeys changed: ', selectedRowKeys);
this.setState({ selectedRowKeys });
};
handleDelete(index) {
this.setState((prevState) => {
const selectedRowKeys = [...prevState.selectedRowKeys];
selectedRowKeys.splice(index, 1);
return { selectedRowKeys };
});
}
render() {
const { selectedRowKeys } = this.state;
const rowSelection = {
selectedRowKeys,
onChange: this.onSelectChange,
onSelection: this.onSelection,
};
return (
<Table
rowSelection={rowSelection}
columns={columns}
dataSource={data}
/>
);
}
}
以上是子组件表格的代码
大概就是这样一个界面,然后怎么样修改才能实现选择评论内容,然后点击删除评论,相应的评论被从表格中删除的同时清空勾选?还有就是选择一页十个评论怎么实现如果能一起解决也可以一起解决,谢谢!
子组件的 data 由父组件传入,直接在父组件通过修改data进行删除、分页等操作。如果是 ajax 操作数据,DELETE 删除后重新 GET 数据,data变化了 table 就会重新 render; ajax GET 时传参 size: 10,通知后台 page size 为 10 进行分页。