reactjs - 为什么我不能将 React 唯一键传递给 onChange 方法

Question

我正在使用 React ES6。我正在渲染一个包含独特鱼元素的库存列表，每个鱼元素都映射到一个唯一的键并从父组件继承 Prop 。我希望能够编辑鱼文本并将此更改输入到父状态。

下面的代码不起作用，因为 onChange 处理程序无法使用 key 属性。大多数在线文档都建议使用 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>
    )
  }

映射键并将它们传递给 renderInventory

renderInventory(key) {

      var fish = this.props.fishes[key];
        console.log(fish);
        console.log("the key is" +key);
        var nameOfFish = fish.name
    return(
<div className = "fish-edit" key={key}>
<input type = "text" value ={nameOfFish} onChange={this.handleChange(key)} />
<input type = "text" value ={fish.price}/>


<select>
  <option value = "unavailable">Sold out!  </option>
  <option value = "available">Fresh!  </option>
</select>


<textarea value={fish.desc}>
</textarea>
</div>

    )

  }

HandleChange 无法记录 key

handleChange(event, key){
console.log("the change handler is now firing and the key is" + key);

}

Answer 1

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

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