表行更新/删除状态（数组）中的数据和切换 React 中的添加/删除类

【问题标题】：Table Row Update/Remove Data in State(Array) and Toggle Add/Remove Class in React表行更新/删除状态（数组）中的数据和切换 React 中的添加/删除类
【发布时间】：2020-01-20 15:44:42
【问题描述】：

我有表格列表，每一行都是可点击的。一旦我单击该行，就需要将相应的数据添加到数组中。如果我再次单击同一行需要从数组中删除数据。同样，我需要为选定的行添加一个切换活动类。

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

【问题讨论】：

handleClick 不处理切换事件。您只是将当前选定的索引推送到选定的行，并没有真正在状态上设置 activeIndex。

标签： javascript html reactjs ecmascript-6

【解决方案1】：

对于 TableRow onCLick 事件：

改变这个：

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

到

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

第一个案例将立即运行，而不是等待事件被调用。

对于类名

改变这个：

className={rowSelected}

收件人：

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

在第一个rowSelected === true 你会得到className={true}，它并不真正指向任何类名。在第二个例子中虽然你会得到className="selected"

【讨论】：