如何使用React.js的map函数找出哪一行被点击了？

Question

我想使用 React.js 地图函数来识别单击了哪一行。我有一个来自 API 的数据列表。现在我每行都有一个删除和编辑按钮。如何找到我点击的行？

演示：https://codesandbox.io/s/map-delete-edit-jeuyfz?file=/src/App.js

我的代码：

import React, { useState } from "react";
import { Button} from "@mui/material";
import "./styles.css";

const data =[
  {
      "title": "title1",
      "IsActive": 1
  },
  {
      "title": "title2",
      "IsActive": 0
  },
  {
      "title": "title3",
      "IsActive": 1
  },
  {
      "title": "title4",
      "IsActive": 1
  }
]

export default function App() {
  const [data2, setData2] = useState(data);
  
  const deleteHandle = (i) =>{
    console.log(i);
  }

  return (
    <div className="App">
        {data2
          ? data2.map((val, i) => (
            <div className="box" key={i}>
              <h2>{val.title}</h2>
              <Button onClick={deleteHandle}>Delete</Button>
              <Button>Edit</Button>
              </div>
            ))
          : ""}
    </div>
  );
}

Answer 1

由于您拥有地图函数中的索引和

val

，因此您可以将其传递给

deleteHandler

，如下所示：

export default function App() {
  const [data2, setData2] = useState(data);
  
  const deleteHandle = (i) =>{
    console.log(i);
  }

  return (
    <div className="App">
        {data2
          ? data2.map((val, i) => (
            <div className="box" key={i}>
              <h2>{val.title}</h2>
              <Button onClick={() => deleteHandle(i)}>Delete</Button>
              <Button>Edit</Button>
              </div>
            ))
          : ""}
    </div>
  );
}

这将允许您访问这些内容并找出单击了哪一个

Answer 2

您的

deleteHandler

缺少一些上下文信息，这些信息实际上是可用的，因为您正在通过数组与

.map()

进行交互。

要识别单击了哪一行，只需将参数传递给处理程序即可，即

<Button onClick={() => deleteHandler(i)}>Delete</Button>

...其中

i

只是您单击的行的索引。

要从数据中删除元素，您可以使用功能更新，只需复制预先存在的数据，通过接收到的索引

i

拼接出条目，然后返回变异数组：

const deleteHandler = (i) => {
  setData2(data => {
    const newData = [...data];
    newData.splice(i, 1);
    return newData;
  });
};

在此处查看分叉的 CodeSandbox 示例的概念验证：