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

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

    return <th><button onClick={handler} className="delete">Delete</button></th>);

}

表单 onSubmit 句柄：

<form onSubmit={handlerFunc}>

        <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>

<YourComponent handler={handlerFunc} />