Reagieren: Wie Sie hören, Kind Komponente Ereignisse
Ich habe eine Komponente, sagen wir, es enthält ein Formular. Die form mit untergeordneten Komponenten, die im wesentlichen UI-widgets für die Ausgabe von text ein, und wählen Sie Menüs.
Wählen Sie die Menü-Komponenten sind ein wenig Phantasie und einige Staatliche Pflege mit dem onChange-Ereignis.
Meine Frage ist, wie mache ich den Haken in das onChange-Ereignis für ein select-Menü aus der übergeordneten (form) - Komponente? Ich kann mich nicht übergeben, onChange durch Requisiten, wie ich bereits onChange angegeben innerhalb der Komponente auswählen, und ich will nicht, um es zu überschreiben.
Beispiel:
var Form = React.createClass({
handleSelectChange: function(){
//Do something when <Select /> changes
},
render: function () {
var selectMenuOptions = [
{label: 'Choose...', value: ''},
{label: 'First option', value: 'one'},
{label: 'Second option', value: 'two'}
];
return (
<form>
<Select name="selectMenu" id="selectMenu" options={selectMenuOptions} />
</form>
);
}
});
var Select = React.createClass({
getDefaultProps: function() {
return {
options: [],
className: "select"
};
},
getInitialState: function () {
return {
buttonText: 'Loading...',
defaultValue: null
};
},
handleChange: function (e) {
//Update buttonText state
},
render: function () {
return (
<div className={this.props.className}>
<div className="select__button">{this.state.buttonText}</div>
<select className="select__selector"
ref="select"
onChange={this.handleChange}>
{this.props.options.map(function(option, i){
return (<Option option={option} key={i} />);
})}
</select>
</div>
);
}
});
- "Ich habe eine Komponente, sagen wir, es enthält ein Formular." Poste bitte den code für die eigentlichen Komponenten.
- Code-Beispiel Hinzugefügt.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Mit
<Select onChange={...} />
nicht überschreiben<select onChange={...} />
innerhalb der Selectrender
Methode. Die<Select/>
Komponente und die<select/>
Komponente macht es komplett unterschiedliche sets vonprops
.Der einfachste Weg, das zu tun, was Sie wollen, denke ich, ist es, Ihr Wählen die
handleChange
Aufruf der Methodethis.props.onChange
. Sie können nur übergeben Sie das gleichee
argumenthandleChange
erhält:if (this.props.onChange)
?onChange
prop übergeben wurde, um die Komponentethis.props.onChange(e)
wirft einen Fehler.this.props.onChange(e)
wennthis.props.onChange
istundefined
haben, erhalten Sie eine Fehlermeldung. Wenn Sie nicht immer einen Fehler, dann entweder bist du nicht telefonieren oder es ist nicht undefiniert.propTypes.isRequired
statt?onChange={this.props.onChange && this.handleChange}
imrender
Methode.