Выберите только одну строку в компоненте таблицы ant-design - PullRequest
0 голосов
/ 25 мая 2019

У меня проблема, и мне нужна помощь. В нашем проекте мы используем библиотеку ant-design. https://ant.design/components/table Компонент, который мы должны использовать, - это таблица. Когда я нажимаю на строку, я должен вызвать действие. Однако я должен проверить только одну строку, а не много, поэтому, когда я нажимаю на строку, флажок в предыдущей строке должен быть снят.

Мой код здесь:

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

Массив selectedRow имеет последнее значение, НО, но флажок НЕ установлен. Есть идеи?

1 Ответ

1 голос
/ 25 мая 2019

Флажки позволяют пользователю выбрать один или несколько параметров из ограниченного числа вариантов, а переключатели позволяют пользователю выбрать только один из ограниченного числа вариантов.

передать тип в таблицу rowSelection prop, по умолчанию установлен флажок.

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