Is there a way to have a child component which rendered only an <option> tag to trigger the onChange of it's parent <select> ?
I ask because I've tried onClick and onChange on the the child <option> and it seems to be aloof to them.
The idea is a parent React component that looks like this:
render() {
return (
<select value={this.state.value} onChange={this.handleChange}>
<ChildOption onClick={this.handleChange}
</select>
);
}
and the ChildOption component like this:
render() {
return (
<option onClick={this.handleClick} />
);
}
The full code for this issue is here in a CodePen (pretend it's returning an array of <option>s:
Real world code here in Cloud9:
You can have a child component that only renders the option tag. You actually don't need to add an event handler to the option tag. The select onChange event get called automatically once an option tag is clicked (passing it's value with it).
See the example here: http://codepen.io/anon/pen/oBzzWr?editors=0010