最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin6浏览0评论

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?

Share Improve this question asked May 25, 2019 at 9:37 RamAlxRamAlx 7,34424 gold badges64 silver badges110 bronze badges
Add a ment  | 

1 Answer 1

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'
};
发布评论

评论列表(0)

  1. 暂无评论