CODEWITHSUNDEEP
reactjsantd
Nagamani Siripalli
Nagamani Siripalli

Reputation: 3

How to get multiple checkbox values in reactjs using antd checkbox?

I am getting the checkboxes based on table columns. If I select check box I am getting only one checked value. I want to get multiple checked values.

How do I achieve that?

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>
    );
  }
}

Upvotes: 0

Views: 9705

Answers (1)

Shreyans Shrivastav
Shreyans Shrivastav

Reputation: 527

Use checkbox group instead of checkbox

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

I hope this would help

Antd's Checkbox Group https://ant.design/components/checkbox/#components-checkbox-demo-group

Upvotes: 3

Related Questions