2017-02-16 21 views
1

Ich habe eine Stateful-Komponente, in der ich versuche, einige zustandslose Komponenten (jede mit Texteingabe) mit map zu rendern.Received event.value ist bei Texteingabe nicht definiert.

Das Hauptproblem ist, dass, wenn ich den Text in Eingabe setze ich undefined als event.target empfange. Ich vermute, dass das Problem der aktuelle Kontext ist. Ich habe versucht zu debuggen, aber ich habe keine Ideen mehr, wie ich dieses Problem lösen könnte.

Geordnete Komponente:

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

Kinder Komponente:

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

export default AdvancedOption; 

Antwort

1

In Ihrer Eltern Komponente handleUpdateInput, würden Sie einen anderen Parameter für das Ereignis weitergegeben umfassen müssen.

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

Ansonsten ist die Funktion nicht weiß, was event ist.

Innerhalb des Eingangs, müssen Sie das Ereignis in die Funktion zu übergeben,

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

Werfen Sie einen Blick auf die Dokumentation zu reagieren, wie eine gesteuerte Eingabe zu erstellen: https://facebook.github.io/react/docs/forms.html#controlled-components

Hoffnung, dass hilft!

+0

Danke Kumpel! Es funktioniert. Ich war so nah an meinen bisherigen Lösungen. –

Verwandte Themen