爲什麼我無法將React唯一鍵傳遞給onChange方法

我正在使用React ES6。我正在渲染一個包含獨特魚類元素的清單列表，每個魚類元素都映射到一個唯一的鍵，並從父組件繼承道具。我希望能夠編輯魚文本並將此更改提供給父狀態。爲什麼我無法將React唯一鍵傳遞給onChange方法

由於onChange處理程序不支持關鍵通道，因此下面的代碼不起作用。大多數在線文檔建議使用ReactLink進行雙向流動，但現在已棄用，因此我寧願找到另一種解決方案。我的問題有兩方面 - 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

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無法登錄鍵

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

}

來源

2016-07-15 ElJefeJames

你應該換你的事件回調function或使用.bind

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

來源

2016-07-15 08:10:05

包裝到功能工作完美，謝謝！ – ElJefeJames

爲什麼我無法將React唯一鍵傳遞給onChange方法

回答

相關問題