I have a component, let's say it contains a form. The form has child components which are essentially UI widgets for outputting text inputs and select menus.
The select menu components are a bit fancy and do some state maintaining using the onChange event.
My question is; how do I hook into the onChange event for a select menu from the parent (form) component? I can't pass onChange through props as I already have onChange specified inside the select component and I don't want to override it.
Example:
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>
);
}
});
Using <Select onChange={...} />
won't override the <select onChange={...} />
inside Select's render
method. The <Select/>
component and the <select/>
component it renders have completely different sets of props
.
The simplest way to do what you want, I think, is to have your Select's handleChange
method call this.props.onChange
. You can just pass it the same e
argument handleChange
receives:
var Form = React.createClass({
handleSelectChange: function(){
// Do something when <Select /> changes
},
render: function () {
// ...
return (
<form>
<Select name="selectMenu"
id="selectMenu"
options={selectMenuOptions}
onChange={this.handleSelectChange} />
</form>
);
}
});
var Select = React.createClass({
// ...
handleChange: function (e) {
if (this.props.onChange) {
this.props.onChange(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>
);
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.