Javascript 将变量向下传递到ReactJS子组件中的处理程序

我有一个AllPersons组件，在这里我想从我的主app.js组件传递一个回调，这样我就可以编辑我在表中显示的一个人

我的问题是我需要这个人的id，以便只改变那个人

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

但是，我需要将里面的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")

  }

所有人
//App.js中的handle方法
onEditHandler=（事件）=>{
event.preventDefault（）；
控制台日志（“编辑集”）
}

---

我正在考虑将id设置为一个状态，但我认为这太过分了，

在这种情况下使用

curryng

这样定义你的投手

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

并在JSX中使用它

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

---

在这种情况下使用

curryng

这样定义你的投手

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

并在JSX中使用它

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

感谢您的回答，在传递事件和第二个参数时，您是否始终必须执行两个箭头函数？@kristofertølbøll为此，我们可以使用

lodash

\uuuu.partial

帮助程序。因此，您可以像往常一样执行普通函数

eventHandler=（id，event）=>{}

，或者部分执行

。部分（eventHandler，id）

函数的下一次调用实际上会使用

id

和

event

参数调用它。谢谢您的回答，您是否总是要执行两个箭头函数，当同时传递一个事件和第二个参数时？@kristofertølbøll为此，我们可以使用

lodash

.partial

helper。因此，您可以像往常一样执行普通函数

eventHandler=（id，event）=>{}

，或者部分执行

。
partial（eventHandler，id）
函数的下一次调用实际上将使用
id
和
event
参数调用它