如何使用 React 从 HTML table 中删除一行？

Question

我正在尝试使用 React 删除 HTML table 中的一行。我在要删除的行内的删除按钮上有一个 onClick 处理程序，但如何定位要删除的特定行？我传递了一个具有唯一 id 属性的 site 变量。也许这有帮助？

// table component

export default function IndexPage() {
  const site = { id: 123 };
  const removeSite = async ({ id, e }) => {
    console.log(e.target);
  };
  return (
    <table>
      <tbody>
        <tr>
          <th>Name</th>
        </tr>
        <tr>
          <td>Valles Caldera National Preserve</td>
          <button onClick={(e) => removeSite(site,e )}>Delete</button>
        </tr>
      </tbody>
    </table>
  );
}

这里是一个代码沙箱link。

Answer 1

任何更新的 React 最佳模式是使用 state 变量。所以如果你需要更新一个table，你应该使用状态数组变量来存储table行的数据，例如tableRows，并使用.map()创建table 来自这个变量的行。现在，如果您使用 setTableRows([...newVariable]) 更新此变量，这将自动更新您的 table.

根据您的更新进行更新：

应该像这样更新您的代码：

export default function IndexPage() {
  const [sites, setSites] = [{ id: 123,name:"Valles Caldera National Preserve" }];

  const removeSite = (id) => {
    // do more staff like deleting from database

    // you may need to iterate through new array, because direct updating of state array variables do not force to re-render because of some reasons.
    setSites([...sites.filter(site => site.name !== id)]);
  };

  return (
    <table>
      <tbody>
        <tr>
          <th>Name</th>
        </tr>
        {map.sites((site) => {
          return (
            <tr>
              <td>{site.name}</td>
              <button onClick={() => removeSite(site.id)}>Delete</button>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

Answer 2

在没有更多信息的情况下，我假设您计划映射数据以生成每一行。

如果您使用 API 来获取数据，您可以利用 useEffect hook to fetch the data and set it to a state variable with the useState 挂钩来管理可见行，例如：

export default function IndexPage() {

  const [sites,setSites] = [];
  useEffect(()=>{
    // Fetch your data here and pass it to setSites to set state
    // For example, setState([{ id: 123,name:"Valles Caldera National Preserve" }]) 
  },[])

  const removeSite = async ({ id, e }) => {
    // Below we update state to be the original array, less the clicked row
    setSites(sites.filter(site =>site.name !== id));
  };
  return (
    <table>
      <tbody>
        <tr>
          <th>Name</th>
        </tr>
        {map.sites((site) => {
          return (
            <tr>
              <td>{site.name}</td>
              <button onClick={(e) => removeSite(site.id, e)}>Delete</button>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

Answer 3

更好的实现方法是使用数组显示并为各个行项目提供 ID ->

你的代码将是这样的 ->

const [dataArray, setDataArray] = useState([
    { name: "Valles Caldera National Preserve", id: 1 },
    { name: "Tyler Morales", id: 2 },
  ]);

  const removeSite = async (id) => {
    setDataArray((data) => data.filter((dataEach) => dataEach.id !== id));
  };

  return (
    <table>
      <tbody>
        <tr>
          <th>Name</th>
        </tr>
        {dataArray.map((data) => (
          <tr key={data.id}>
            <td>{data.name}</td>
            <button onClick={(e) => removeSite(data.id)}>Delete</button>
          </tr>
        ))}
      </tbody>
    </table>
  );

如何使用 React 从 HTML table 中删除一行？

How to delete a row from a HTML table with React?

row

html-table

delete-row

reactjs