ReactJS中使用map方法渲染列表时如何在DeleteBtn中获取index值

实现方法 #

你可以在onClick事件处包裹一层箭头函数，直接把当前遍历得到的index作为参数传入DeleteBtn函数即可。

修改后的渲染代码如下：

items.map((itemsvalue, index) => {
  return (
    <>
      <li key={index}>
        <button 
          className="deleteBtn" 
          onClick={() => DeleteBtn(index)}
        >
          X
        </button>
        {itemsvalue}
      </li>
    </>
  );
});

对应的DeleteBtn直接接收参数就能拿到对应索引：

const DeleteBtn = (index) => {
  // 此处即可访问到当前点击项的index
  console.log("待删除项索引：", index);
  // 后续可以基于index写删除逻辑，比如过滤原数组更新state
  const updatedItems = items.filter((_, i) => i !== index);
  // 调用state的更新方法保存新数组即可
}

补充说明 #

• 如果你的列表会频繁执行增删、排序操作，不建议用index作为操作依据和key值，最好给每个字符串项绑定唯一ID，传ID进行操作可以避免出现渲染异常、删错项的问题。
• 除了箭头函数的写法，你也可以用bind传参，写法为onClick={DeleteBtn.bind(null, index)}，实现效果和箭头函数一致。

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