React 点击删除按钮删除表格中的内容 如何操作

Question

在参与项目的过程中遇到了一个小问题，因为刚入门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}
      />
    );
  }
}

以上是子组件表格的代码

大概就是这样一个界面，然后怎么样修改才能实现选择评论内容，然后点击删除评论，相应的评论被从表格中删除的同时清空勾选？还有就是选择一页十个评论怎么实现如果能一起解决也可以一起解决，谢谢！

Answer 1

子组件的 data 由父组件传入，直接在父组件通过修改data进行删除、分页等操作。如果是 ajax 操作数据，DELETE 删除后重新 GET 数据，data变化了 table 就会重新 render; ajax GET 时传参 size: 10，通知后台 page size 为 10 进行分页。

Answer 2

怎么感觉的的子组件有点多余啊，你在父组件中添加那个‘删除评论’的按钮，然后又去子组件去实现删除功能多此一举啊。你完全可以把 Table这个UI组件直接在父组件中使用，在父组件中实现删除功能就好了，少了一层嵌套，功能就会简单明了