ReactJS 中的 Map 方法

如何解决ReactJS 中的 Map 方法

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

这里的 items 是一个字符串数组。 如何在 DeleteBtn 函数中访问索引值？？？

解决方法

您可以为 onClick 处理程序传递内联函数。我已将函数名称更改为 onClickDelete ，因为将点击处理程序命名为 onClickDelete,handleDelete 的常见做法。

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

,

您可以将 index 作为 map 中的第二个参数传递

MDN lINK