React: How To Listen To Child Component Events

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 compon

Solution 1:

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:

varForm = React.createClass({
  handleSelectChange: function(){
    // Do something when <Select /> changes
  },

  render: function () {
    // ...return (
      <form><Selectname="selectMenu"id="selectMenu"options={selectMenuOptions}onChange={this.handleSelectChange} /></form>
      );
    }
});

varSelect = React.createClass({
  // ...handleChange: function (e) {
    if (this.props.onChange) {
      this.props.onChange(e);
    }
    // Update buttonText state
  },

  render: function () {
    return (
      <divclassName={this.props.className}><divclassName="select__button">{this.state.buttonText}</div><selectclassName="select__selector"ref="select"onChange={this.handleChange}>
          {this.props.options.map(function(option, i){
            return (<Optionoption={option}key={i} />);
          })}
        </select></div>
    );
  }
});