javascript - 将变量传递给ReactJS子组件中的处理程序

Question

我有一个 AllPersons 组件，我想从我的主 app.js 组件传递一个回调，我希望如此，我可以编辑一个在我的表格中显示的人。

我的问题是我需要该人的 ID，以便仅更改该人。

我正在映射人员对象数组并添加一个按钮来进行回调

但是，我需要将内部 id 传递给处理程序，以便我可以仅编辑该人

 <div className="col-md-6">
        <h3>All Persons</h3>
        <AllPersons persons={this.state.persons} onEdit= 
 {this.onEditHandler} id={this.id} />
      </div>


   //AllPersons.js
   {persons.map((person, i) => (

      <tr key={i}>
        <th>{person.age}</th>
        <th>{person.name}</th>
        <th>{person.gender}</th>
        <th>{person.email}</th>
        <a href="/#" onClick= {props.onEdit} id={person.id}>edit</a>
      </tr>


    //handle method inside App.js
      onEditHandler = (event) =>{
   event.preventDefault();
    console.log("editet")

  }

我正在考虑将 id 设置为状态，但我认为这太多了，

Answer 1

在本例中使用curryng

像这样定义你的hander

editHandler = id => event => {
   // you have id here
}

并在 JSX 中使用它

<a href="/#" onClick= {props.onEdit(person.id)}>edit</a>