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

【问题标题】：How to add/remove from reactjs element in onClick event如何在 onClick 事件中添加/删除 reactjs 元素
【发布时间】：2019-11-17 06:59:37
【问题描述】：

我可以使用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 事件删除数组项

【问题讨论】：

要删除一个项目，您需要让 onClick 调用一个函数来更新您所在状态的数组。当 React 检测到状态发生变化时，它会相应地刷新显示。
能分享一下提示代码吗

标签： javascript arrays node.js reactjs nodes

【解决方案1】：

要使用相同的dddd 方法插入和删除（如果它已经存在），您可以像这样使用Array 的splice 函数：

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

data.key 是一种比较输入对象和列表中对象的方法。

【讨论】：

我只能添加item，点击dd()方法就不行了
data 是什么类型的对象？如果它是一个复杂的对象，他们使用indexOf 可能不匹配它。如果是这种情况，您需要编写一个函数来查找数组中的现有值，如下所示：for (let i=0; i<d.length; i++) { if (d[i].key === data.key) {index = i; break;} } 其中key 是对象的一部分，可以让您比较它们。我已编辑答案以包含此更改

【解决方案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,
  })
}

【讨论】：