Блог

Я работаю над проектом, в котором используются виртуализированные таблицы и строки React для отображения информации об элементах.

Существует уже существующая функция, написанная для обработки выбранного состояния флажка, которая привязана к свойству данных элемента isSelected .

То, что я пытаюсь сделать, — это установить выбранное состояние флажка в любое значение исходных данных для каждого элемента archived , а затем переключать оба isSelected archived значения и при каждом щелчке.

Я попытался сделать это, изменив !isChecked значение archived в функции handleSelect, а затем используя isChecked={row.archived} в selectCellRenderer, но это просто ставит флажок, так что вы вообще не можете его переключать, и я не уверен, как это исправить.

Родительская функция передается в качестве реквизита:

   handleSelect = ({ index, rowData }) => {
    const { selected } = this.state;
    const { id, isChecked, archived } = rowData;

    const newSelected = !isChecked ? [...selected, id] : selected.filter(item => item !== id);

    this.setState({ selected: newSelected });
  };
 

Дочерняя функция, которая взаимодействует с родительской:

   const selectCellRenderer = ({ rowIndex: index, rowData }) => (
    <Checkbox isChecked={rowData.isChecked} onChange={() => onSelect({ index, rowData })} />
  );
 

И данные каждого элемента выглядят так:

 {
  archived: false,
  created_at: "2021-06-04T01:48:25.438Z",
  id: "1234567-891-4636-8c04-97a142fa457d",
  isChecked: false
}