Select ant-design table 组件中只有一行

Question

我遇到了问题，需要一些帮助。我们在项目中使用了 ant-design 库。 https://ant.design/components/table 我们应该使用的组件是 table。当我点击一行时，我必须触发一个动作。但是我必须只检查一行而不是很多所以当我点击一行时应该取消选择前一行中的复选框。

我的代码在这里：

onSelectChange = selectedRowKeys => {
    if (selectedRowKeys.length > 1) {
      const lastSelectedRowIndex = [...selectedRowKeys].pop();
      this.setState({ selectedRowKeys: lastSelectedRowIndex });
    }
    this.setState({ selectedRowKeys });
    console.log('selectedRowKeys changed: ', selectedRowKeys);
  };

  render() {
    const { selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    return (
      <React.Fragment>
        <div style={{ marginBottom: 16 }} />
        <Table
          rowSelection={rowSelection}
          columns={columnEvaluation}
          dataSource={result}
        />
      </React.Fragment>
    );
  }

selectedRow 数组具有最新值，但未选中该复选框。有什么想法吗？

Answer 1

复选框用于让用户select有限数量的选择中的一个或多个选项，而单选按钮让用户select仅在有限数量的选择中选择一个。

将类型传递给 table 的 rowSelection 属性，默认为复选框。

const rowSelection = {
  selectedRowKeys,
  onChange: this.onSelectChange,
  type: 'radio'
};

Select ant-design table 组件中只有一行

Select just one row in ant-design table component

javascript

reactjs

datatable

antd

ant-design-pro