Как получить несколько значений флажков в реагировать с помощью флажка antd?

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