Reactjs 为什么可以';我将React唯一键传递给onChange方法

Reactjs 为什么可以';我将React唯一键传递给onChange方法,reactjs,ecmascript-6,Reactjs,Ecmascript 6,我用的是ES6。我正在呈现一个包含唯一fish元素的清单,每个fish元素映射到一个唯一的键,并从父组件继承道具。我希望能够编辑鱼文本,并将此更改反馈到父状态 我下面的代码不起作用,因为onChange处理程序无法使用key prop。大多数在线文档都建议使用ReactLink实现双向流,但现在已经不推荐使用这种方法,因此我宁愿找到另一种解决方案。我的问题有两个方面:ES6 react组件中双向流的最佳模式是什么?为什么该代码不起作用?具体来说,为什么我不能在onChange处理程序中记录“ke

我用的是ES6。我正在呈现一个包含唯一fish元素的清单,每个fish元素映射到一个唯一的键,并从父组件继承道具。我希望能够编辑鱼文本,并将此更改反馈到父状态

我下面的代码不起作用,因为onChange处理程序无法使用key prop。大多数在线文档都建议使用ReactLink实现双向流,但现在已经不推荐使用这种方法,因此我宁愿找到另一种解决方案。我的问题有两个方面:ES6 react组件中双向流的最佳模式是什么?为什么该代码不起作用?具体来说,为什么我不能在onChange处理程序中记录“key”

非常感谢

  render () {
    var fishIds = Object.keys(this.props.fishes);
    console.log("fishes are....." +fishIds);
    return (
      <div>
      <h2>Inventory</h2>
      {fishIds.map(this.renderInventory)}
      <AddFishForm {...this.props}/>
      <button onClick={this.props.loadSamples}> Load Sample Fishes</button>
      </div>
    )
  }

您应该将事件回调包装到
函数
或使用
.bind

<input 
  type="text"
  value={ nameOfFish } 
  onChange={ (e) => this.handleChange(e, key) } 
/>
this.handleChange(e,key)}
/>
handleChange(event, key){
console.log("the change handler is now firing and the key is" + key);

}
<input 
  type="text"
  value={ nameOfFish } 
  onChange={ (e) => this.handleChange(e, key) } 
/>