反應onChange從<select>字段不發射

我有父和子組件。我的子組件包含一個帶有一些選項的選擇字段，這些應該在點擊時更新父項的狀態（onChange），但它們不會。我把一個調試器投入到應該在onChange()發生時應該運行的函數中，但它從來沒有碰到它。我在哪裏錯了？反應onChange從<select>字段不發射

Parent Component Function

updateModal(evt) { 
    this.setState({ reason: evt.target.value}) 
}

傳遞的道具，像這樣：

<PastSessions 
    updateModal={this.updateModal.bind(this)} 
/>

然後這裏是我Child Component與選擇欄。

<select value={this.props.reason} onChange={this.props.updateModal}> 
    <option value='One'>One</option> 
    <option value='Two'>Two</option> 
    <option value='Three'>Three</option> 
</select>

來源

2017-10-13 vin_Bin87

包裝this.props.updateModal在你的孩子部分與另一個福 – Sri

我最終重新寫它，它的工作原理。看起來是這樣的：

handleUpdateChange(e) { 
    this.setState({ 
     reason: e.target.value 
    }) 
    }

通過道具，像這樣

handleUpdateChange={this.handleUpdateChange.bind(this)}

這樣調用

<select value={this.props.reason} onChange={this.props.handleUpdateChange}>

就像一個魅力

來源

2017-10-13 03:06:21

如果我把變量和函數名放在一邊，是不是* *就像原始問題中的代碼一樣？ – Jaxx

是的，它實際上是。我有一個不同的答案，其中包括將它定義爲一個類似'let handleUpdateChange =（）=> {...}'的自執行函數，然後允許'select'的'value'被更改，但它在提交時不會保存，因此我在快速谷歌搜索後將其更改爲此，並且完美無瑕。儘管你是完全正確的，但我不知道這與我剛開始的有何不同。 –

反應onChange從<select>字段不發射

回答

相關問題