收到的event.value未定義文本輸入變化

Question

我有一個有狀態的組件，我試圖使用map來渲染幾個無狀態的組件（每個都帶有文本輸入）。

主要問題是，當我將文本輸入到輸入中時，我收到undefined作爲event.target。我想這個問題是當前的情況。我試圖調試，但我沒有更多的想法如何解決這個問題。

父組件：

handleUpdateInput = (name) => { 
    this.setState({ [name]: event.target.value }) // event.target = undefined 
} 

renderAdvancedOptions(fields) { 
    return fields.map(field => { 
    const { id, name } = field; 

    return (
     <AdvancedOption 
     key={id} 
     name={name} 
     inputValue={this.state[name]} 
     handleUpdateInput={this.handleUpdateInput} 
     /> 
    ); 
    }); 
} 

子組件：

const AdvancedOption = ({ name, inputValue, handleUpdateInput }) => { 
    return (
    <input 
     name={name} 
     onChange={() => handleUpdateInput(name)} 
     value={inputValue} 
     type="text" 
    /> 
); 
}; 

export default AdvancedOption; 

Answer 1

在你父組件的handleUpdateInput，你需要包括另一個參數事件傳下來的。

handleUpdateInput = (name, event) => { 
    this.setState({ [name]: event.target.value }) // event.target = undefined 
} 

否則該函數不知道event是什麼。

內部的輸入，你需要將事件傳遞到功能，

onChange={(e) => handleUpdateInput(name, e)} 

看看的反應如何創建一個控制輸入文檔： https://facebook.github.io/react/docs/forms.html#controlled-components

。希望幫助！