如何在antd表的行中切换复选框？

Question

我在表中每一行的第一列中都有一个复选框。我可以通过单击复选框来对其进行切换。

如何通过单击整行的任何区域来使其“ antd way”正确切换？

Answer 1

它在antd文档中，但是您需要采取一种状态来处理它。

  

可以通过将第一列作为可选列来选择行。

您可以使用

onRow={record => ({
  onClick: () => {
    this.selectRow(record);
  }
})}

和selectRow

selectRow = record => {
  const selectedRowKeys = [...this.state.selectedRowKeys];
  if (selectedRowKeys.indexOf(record.key) >= 0) {
    selectedRowKeys.splice(selectedRowKeys.indexOf(record.key), 1);
  } else {
    selectedRowKeys.push(record.key);
  }
  this.setState({ selectedRowKeys });
}

Demo和Source

Answer 2

有一个onRow属性可以使用。请参阅官方文档中的示例：

class App extends React.Component {
  state = {
    selectedRowKeys: [],
  };

  selectRow = (record) => {
    const selectedRowKeys = [...this.state.selectedRowKeys];
    if (selectedRowKeys.indexOf(record.key) >= 0) {
      selectedRowKeys.splice(selectedRowKeys.indexOf(record.key), 1);
    } else {
      selectedRowKeys.push(record.key);
    }
    this.setState({ selectedRowKeys });
  }

  onSelectedRowKeysChange = (selectedRowKeys) => {
    this.setState({ selectedRowKeys });
  }

  render() {
    const { selectedRowKeys } = this.state;

    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectedRowKeysChange,
    };

    return (
      <Table
        rowSelection={rowSelection}
        columns={columns}
        dataSource={data}
        onRow={(record) => ({
          onClick: () => {
            this.selectRow(record);
          },
        })}
      />
    );
  }
}

Source