javascript - Select just one row in ant-design table component - Stack Overflow

admin管理员组

文章数量:1328773

i'm having a problem and need some help. We are using ant-design library in our project. /ponents/table The ponent we should use is a table. When i click on a row i must trigger an action. However i must check only one row not many so when i click on a row the checkbox in the previous row should be deselect.

My code is here:

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

The selectedRow array is having the latest value BUT But the checkbox is NOT checked. Any ideas?

i'm having a problem and need some help. We are using ant-design library in our project. https://ant.design/ponents/table The ponent we should use is a table. When i click on a row i must trigger an action. However i must check only one row not many so when i click on a row the checkbox in the previous row should be deselect.

My code is here:

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

The selectedRow array is having the latest value BUT But the checkbox is NOT checked. Any ideas?

• javascript
• reactjs
• datatable
• antd
• ant-design-pro

Share Improve this question Follow asked May 25, 2019 at 9:37 RamAlxRamAlx 7,3442424 gold badges6464 silver badges110110 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Checkboxes are used to let a user select one or more options of a limited number of choices, and Radio buttons let a user select only one of a limited number of choices.

pass a type to your table's rowSelection prop, default is checkbox.

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

本文标签： javascriptSelect just one row in antdesign table componentStack Overflow