是否可以使此删除按钮和输入表单起作用？

Question

所以 iv 现在被卡住了很长一段时间，我需要让我的删除按钮在每一行上都起作用，并让输入将信息吐到我的表中。我的问题是：甚至有可能做到吗？（我今天才开始从字面上学习react/js）。

最终产品应该看起来像“待办事项列表”，但当我打开它时，它会自动具有来自 api 的值，我可以删除和添加新的值。

我的代码：

 export default class FetchRandomUser extends React.Component {

  state = {

    loading: true,

    people: []

  };

  async componentDidMount() {

    const url = "https://swapi.dev/api/people/";

    const response = await fetch(url);

    const data = await response.json();

    const pirmadata = data;

    this.setState({ people: pirmadata.results, loading: false });

   console.log(pirmadata)

  }

  render() {

    if (this.state.loading) {

      return <div>loading...</div>;

    }

    if (!this.state.people.length) {

      return <div>didn't get a person</div>;

    }

    return (

      <div className="listas">

        {this.state.people.map(person => (

          <tr className="taras" key={person.name + person.age}>

            <th className="name">{person.name}</th>

            <th className="birth">{person.birth_year}</th>

            <th className="genders">{person.gender}</th>

            <th><button type="submit" className="delete">Delete</button></th>

          </tr>

        ))}

      </div>

    );

  }

}

我的表单是在不同的 .js 文件上制作的，基本上是一个包含此表单的函数：

<div className="forma">

    <form>

        <input type="text" placeholder="Enter name :"></input>

        <input type="text" placeholder="Enter birth date :"></input>

        <input type="text" placeholder="Enter gender :"></input>

        <button type="submit">Submit entry!</button>

    

    </form>

</div>

Answer 1

click为作为元素onSubmit处理程序的删除按钮添加一个处理程序form。这样当您单击它时，它将调用表单的处理函数。将 th 元素作为 prop传递handlerFunc给组件，以便能够按以下方式使用它：function YourComponent({ handler }){&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; return <th><button onClick={handler} className="delete">Delete</button></th>);}表单 onSubmit 句柄：<form onSubmit={handlerFunc}>&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" placeholder="Enter name :"></input>&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" placeholder="Enter birth date :"></input>&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" placeholder="Enter gender :"></input>&nbsp; &nbsp; &nbsp; &nbsp; <button type="submit">Submit entry!</button></form><YourComponent handler={handlerFunc} />