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 won't override the inside Select's render method. The component and the 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  changes
  },

  render: function () {
    // ...
    return (
      

        
      
      );
    }
});

var Select = React.createClass({
  // ...

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

  render: function () {
    return (
      

        
{this.state.buttonText}
        
          {this.props.options.map(function(option, i){
            return ();
          })}
        
      
    );
  }
});