Таблица Строка Обновление / Удаление данных в состоянии (массив) и Переключение Добавить / Удалить класс в React

Question

У меня есть список таблиц, и каждая строка кликабельна. После того, как я щелкну строку, необходимо добавить соответствующие данные в массив. Если я снова нажму на ту же строку, необходимо удалить данные из массива. Кроме того, мне нужно добавить активный класс переключения для выбранной строки.

const data = [
    {
        name: "Name1",
        foramt: "pdf",
        version: 0
    },
    {
        name: "Name2",
        foramt: "pdf",
        version: 0
    },
    {
        name: "Name3",
        foramt: "pdf",
        version: 2
    },
    {
        name: "Name4",
        foramt: "pdf",
        version: 5
    },
]
this.state = {
    active: false,
    activeIndex: null,
    selectedRow: []
}

<Table>
    data.map((item, index) => {
        const rowSelected = this.state.activeIndex === index ? "row-selected" : "";
     return 
        <TableRow className = {rowSelected} onClick={this.handleClick(item,index)}>
            <Cell>{item.name}</Cell>
            <Cell>{item.format}</Cell>
        </TableRow>
    })
</Table>

 handleClick = (item,index) => {
     const {activeIndex} = this.state;
     let array = []
    if(activeIndex !== index) {
        array.push(item);
    }
    this.setState({
      selectedRows: array
    })
  }

Answer 1

Для события onCLick TableRow:

Измените это:

onClick={this.handleClick(item,index)}

На

onClick={() => this.handleClick(item, index)}

Первый случай будет запущен немедленно вместо ожидания вызова события.

И имя класса

Измените это:

className={rowSelected}

На:

className={rowSelected ? "row-selected" : null}

В первом случае, когда rowSelected === true, вы получите className={true}, который на самом деле не указывает ни на какое имя класса. Во втором примере вы получите className="selected"