React组件中如何传递数组当前项至删除函数以移除元素

我明白你遇到的问题了——点击那个"X"删除按钮时，没法把对应的水果项传递给delItem函数，因为当前触发事件的是<p>标签元素，而不是数组里的目标item。不用拆分组件也能轻松搞定，给你几个实用的方案：

方案1：绑定事件时直接传递item参数 #

你可以在bind的时候把当前的item作为参数传进去，这样delItem就能直接拿到要删除的水果项：

修改后的关键代码： #

// 渲染列表时，bind的时候多传一个item参数
var fruitsList = this.state.fruits.map(item => {
  return (
    <li key={item}> {/* 加key是React列表渲染的最佳实践 */}
      <h1> {item} </h1>
      {/* 这里bind(this, item)，把item作为第一个参数传给delItem */}
      <p className="del-btn" onClick={this.delItem.bind(this, item)}> x </p>
    </li>
  )
})

// 修改delItem函数，第一个参数就是我们要的item
delItem(item) {
  console.log('要删除的水果：', item);
  // 用函数式更新state更安全（因为state更新可能异步）
  this.setState(prevState => ({
    fruits: prevState.fruits.filter(val => val !== item)
  }));
}

方案2：用箭头函数包裹（更简洁） #

箭头函数可以直接捕获当前的item，而且不需要手动bind(this)，因为箭头函数会继承外部render方法的this：

修改后的关键代码： #

var fruitsList = this.state.fruits.map(item => {
  return (
    <li key={item}>
      <h1> {item} </h1>
      {/* 箭头函数直接调用delItem并传item */}
      <p className="del-btn" onClick={() => this.delItem(item)}> x </p>
    </li>
  )
})

// delItem函数和方案1一致
delItem(item) {
  console.log('要删除的水果：', item);
  this.setState(prevState => ({
    fruits: prevState.fruits.filter(val => val !== item)
  }));
}

小提示：如果你的列表项特别多（比如上千条），每次render创建新箭头函数可能有微小的性能影响，但绝大多数场景下完全不用担心。

方案3：利用HTML data属性存储数据 #

如果你不想直接传参数，可以把item存在按钮的data属性里，然后在事件函数里通过事件对象获取：

修改后的关键代码： #

var fruitsList = this.state.fruits.map(item => {
  return (
    <li key={item}>
      <h1> {item} </h1>
      {/* 给按钮加data-fruit属性存储item */}
      <p className="del-btn" data-fruit={item} onClick={this.delItem.bind(this)}> x </p>
    </li>
  )
})

// 修改delItem函数，从事件对象里取data属性
delItem(e) {
  const item = e.target.dataset.fruit;
  console.log('要删除的水果：', item);
  this.setState(prevState => ({
    fruits: prevState.fruits.filter(val => val !== item)
  }));
}

额外注意点 #

1. 永远不要直接修改原state（比如this.state.fruits.splice(...)），一定要通过setState更新，推荐用函数式更新（即代码里的prevState => ...），因为React的state更新可能是异步的，用prevState能确保拿到最新的state值。
2. 给列表项添加key属性是React的强制要求（除非列表是静态的），能避免渲染时出现不必要的错误。

内容的提问来源于stack exchange，提问作者hangMan