React: How to listen to child component events

Question

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

Answer 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:

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>
    );
  }
});