Question

我可以使用onClick事件添加对象元素数组。但是，我需要通过使用相同的onClick事件来删除对象数组。

state = {
  listofdata: []
}

dddd = (data) => {
  const d = [...this.state.listofdata]
  const t = d.push(data)

  this.setState({
    listofdata: d
  })
}

<div className="col-md-6">
  {data.map((item) => (<ul><li key={item.name} onClick={() => this.dddd(item)}><span className="plus">+</span>{item.name}</li></ul>))}
</div>

这是我的代码，当我单击按钮时，我可以添加数组项，但是我可以使用onClick事件删除数组项

Answer 1

要使用相同的dddd方法进行插入和删除操作（如果已经存在），则可以像这样使用splice的{{1}}函数：

Array

其中dddd = (data) => { const d = [...this.state.listofdata] let index = -1 // See if 'data' is already in the list for (let i=0; i<d.length; i++) { if (d[i].key === data.key) { // See if you found 'data' in the list index = i; break; } } if (index >= 0) { d.splice(index,1) // Remove it from the array if present } else { d.push(data) // Push it if it wasn't there } this.setState({ listofdata: d // Store the adjusted list }) }是比较输入对象和列表中对象的一种方法。

Answer 2

Thanks everyone. This is answer of toggle elements . 
you can add and remove clicking same button 
dddd = (selectedItem) => {
  const { listofdata } = this.state;

  const newList = [ ...listofdata ];

  const itemIndex = newList.findIndex(item => item.name === selectedItem.name);

  if (itemIndex > -1) {
    newList.splice(itemIndex, 1);
  } else {
    newList.push(selectedItem);
  }

  this.setState({
    listofdata: newList,
  })
}

如何在onClick事件中添加/删除reactjs元素

2 个答案: