如何实现删除按钮，通过单击删除每个特定行？

Question

它是一个程序，通过单击“添加记录”在每一行上简单地获取特定数据。我在执行删除按钮功能时遇到困难，点击它时，该特定行将被删除。它应该在 DeleteHandler() 中实现。

import React, { useState } from 'react'


const DataFetch = () => {

    const [posts, setPosts] = useState([]);

    const ClickHandler = () => {
        const url = `https://swapi.dev/api/people/${Math.floor(Math.random() * 10) + 1}`
        const fetchData = async () => {
            try {
                const response = await fetch(url);
                const json = await response.json();
                console.log(json);
                setPosts([...posts,
                   json.name])
            }
            catch (error) {
                console.log("error");
            }
        };
        fetchData();
    }

    const DeleteHandler = (e) => {
            const name = e.target.getAttribute("name")
            console.log(name)
    }

    return (
        <div>
            <div>
                <button onClick={ClickHandler}>ADD RECORD</button>
            </div>
            <table>
                {posts.map((post) =>
                    <tr>
                        <td key={Math.random()}>{post}</td>
                        <td><button name={post} onClick={()=>DeleteHandler}>delete</button></td>
                    </tr>
                )}
            </table>
        </div>
    );
};

export default DataFetch

Answer 1

在您的 DeleteHandler() 函数中，您应该能够调用 setPosts() 并将帖子设置为自身减去被单击的行，然后您的 JSX 将知道重新呈现自身并且该行不应再在那里。

Answer 2

使用此代码

import React, { useState } from "react";

let uidArray = [];

const DataFetch = () => {
  const [posts, setPosts] = useState([]);

  const ClickHandler = () => {
    const url = `https://swapi.dev/api/people/${
      Math.floor(Math.random() * 10) + 1
    }`;
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const json = await response.json();
        console.log(json);
        setPosts([...posts, json.name]);
      } catch (error) {
        console.log("error");
      }
    };
    fetchData();
  };

  const DeleteHandler = (e) => {
    const ele = document.getElementsByClassName(e)[0];
    ele.remove();
  };

  return (
    <div>
      <div>
        <button onClick={ClickHandler}>ADD RECORD</button>
      </div>
      <table>
        {posts.map((post) => (
          <tr className={post}>
            <td key={Math.random()}>{post}</td>
            <td>
              <button name={post} onClick={() => DeleteHandler(post)}>
                delete
              </button>
            </td>
          </tr>
        ))}
      </table>
    </div>
  );
};

export default DataFetch;

https://codesandbox.io/s/smoosh-breeze-rx7s0b

如何实现删除按钮，通过单击删除每个特定行？

how to implement a delete button , which deletes every specific row by clicking it?

javascript

delete-row

ecmascript-6

reactjs