共被编辑 2 次

版本 更新时间 贡献者 编辑原因 操作
#r2 1月26日 Jack_WJQ20 更新问题 查看

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

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

以上是子组件表格的代码
图片描述
大概就是这样一个界面,然后怎么样修改才能实现选择评论内容,然后点击删除评论,相应的评论被从表格中删除的同时清空勾选?还有就是选择一页十个评论怎么实现如果能一起解决也可以一起解决,谢谢!

#r1 1月26日 Jack_WJQ20 创建问题 查看

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

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

以上是子组件表格的代码
图片描述
大概就是这样一个界面,然后怎么样修改才能实现选择评论内容,然后点击删除评论,相应的评论被从表格中删除的同时清空勾选?