如何使用 antd 复选框在 reactjs 中获取多个复选框值？

Question

我正在获取基于表格列的复选框。如果我选择复选框，我只会得到一个选中的值。我想获得多个检查值。

我如何做到这一点？

class StudentTable extends React.Component {
  state = {
    columns: [
      {
        title: "StudentID",
        dataIndex: "studentid",
        key: "studentid"
      },
      {
        title: "Name",
        dataIndex: "name",
        key: "name"
      }
    ]
  };

  onChange = e => {
    alert(JSON.stringify(e));
    console.log(`checked = ${e.target.checked}`);
    console.log(`checked = ${e.target.name}`);

    this.setState({
      [e.target.name]: e.target.value
    });

    if (e.target.checked === true) {
      let filterData = this.state.columns.filter(columnData => {
        return e.target.name === columnData.dataIndex;
      });
      CsvData.push(filterData[0].dataIndex);

      console.log("After Filter", filterData[0].dataIndex);
    }
  };

  render() {
    return (
      <div>
        {this.state.columns.map(columData => {
          return (
            <div key={columData.key}>
              <Checkbox name={columData.dataIndex} onChange={this.onChange}>
                {columData.dataIndex}
              </Checkbox>
            </div>
          );
        })}
        <CSVLink data={CsvData}>Download me</CSVLink>;<h2>Student Data</h2>
        <Table
          dataSource={data}
          columns={this.state.columns}
          pagination={{ pageSize: 5 }}
          rowKey={record => record.id}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

Answer 1

使用复选框组而不是复选框

<Checkbox.Group 
     options={this.state.columns.map(column => ({label:column.dataIndex, value: column.dataIndex}))} 
     onChange={this.onChange} 
/>

我希望这会有所帮助

Antd 的复选框组https://ant.design/components/checkbox/#components-checkbox-demo-group