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

Question

我正在尝试使用 React 删除 HTML 表中的一行。我在要删除的行内的删除按钮上有一个 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

如果没有更多信息，我假设您计划映射数据以生成每一行。

如果您使用 API 来获取数据，您可以利用 useEffect 挂钩来获取数据并使用 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 2

实现这一点的更好方法是使用 Array 显示并为各个行项提供 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>
  );

Answer 3

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

根据您的更新进行更新：

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

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>
  );
}