ReactJS 中的 Map 方法

Question

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

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

Answer 1

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

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

Answer 2

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

MDN lINK

ReactJS 中的 Map 方法

Map method in ReactJS

reactjs

react-map-gl