Das Änderungsereignis wird für das <select>
Element ausgelöst , nicht für das <option>
Element. Dies ist jedoch nicht das einzige Problem. Die Art und Weise, wie Sie die change
Funktion definiert haben , führt nicht zu einem erneuten Rendern der Komponente. Es scheint, als hätten Sie das Konzept von React noch nicht vollständig verstanden. Vielleicht hilft "Thinking in React" .
Sie müssen den ausgewählten Wert als Status speichern und den Status aktualisieren, wenn sich der Wert ändert. Durch das Aktualisieren des Status wird ein erneutes Rendern der Komponente ausgelöst.
var MySelect = React.createClass({
getInitialState: function() {
return {
value: 'select'
}
},
change: function(event){
this.setState({value: event.target.value});
},
render: function(){
return(
<div>
<select id="lang" onChange={this.change} value={this.state.value}>
<option value="select">Select</option>
<option value="Java">Java</option>
<option value="C++">C++</option>
</select>
<p></p>
<p>{this.state.value}</p>
</div>
);
}
});
React.render(<MySelect />, document.body);
Beachten Sie auch, dass <p>
Elemente kein value
Attribut haben. React / JSX repliziert einfach die bekannte HTML-Syntax und führt keine benutzerdefinierten Attribute ein (mit Ausnahme von key
und ref
). Wenn Sie möchten, dass der ausgewählte Wert der Inhalt des <p>
Elements ist, fügen Sie ihn einfach ein, wie Sie es bei jedem statischen Inhalt tun würden.
Weitere Informationen zur Ereignisbehandlung, Status- und Formularsteuerung:
value
dass er mit dem inneren Text identisch ist?event.target.textContent
event.target.slectedOptions[0].label
.quelle
Reaktionshaken (16.8+):
quelle
Vielen Dank, Felix Kling, aber seine Antwort muss ein wenig geändert werden:
quelle
this.change.bind
inonChange
?Wenn Sie select als Inline für eine andere Komponente verwenden, können Sie diese auch wie unten angegeben verwenden.
Definieren Sie für die Komponente, in der select verwendet wird, die Funktion für onChange wie folgt:
quelle
quelle