表行更新/删除状态(数组)中的数据，并在反应中切换添加/删除类

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

对于 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"