React unique keyをonChangeメソッドに渡すことができません

Question

私はReact ES6を使用しています。ユニークな魚の要素を含むインベントリリストをレンダリングしています。各魚の要素は、固有のキーにマップされ、親コンポーネントからの小道具を継承しています。私は魚のテキストを編集し、この変更を親の状態にフィードインしたいと思っています。

キーの小道具がonChangeハンドラーで使用できないため、以下のコードは機能しません。オンラインのドキュメントのほとんどは、双方向フローのためにReactLinkを推奨していますが、これは廃止されましたので、私はむしろ別の解決策を探しています。私の質問は2つです。つまり、ES6の反応コンポーネントで双方向フローに最適なパターンは何ですか？なぜこのコードは機能しませんか？つまり、onChangeハンドラでログのキーを操作できないのはなぜですか？

多くの感謝の気持ち

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(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をrenderInventoryに渡す

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