title: Multiple event handlers for the same event and element with Reactjs
body: <p>I'm writing an extended version of the input element. Here is a simplified version of it:</p>
  
  <pre><code>var MyInput = React.createClass({
      render: function () {
          return (
              &lt;div&gt;
                  &lt;input type="text" onChange={this.changeHandler} {...this.props} /&gt;
              &lt;/div&gt;
          );
      },
  
      changeHandler: function(event){
          console.log('Trigger me first');
      }
  });
  </code></pre>
  
  <p>I'm using it in a context like this:</p>
  
  <pre><code>&lt;MyInput placeholder="Test" value={this.state.myValue} onChange={function(event){
      console.log('Trigger me second');
  }} /&gt;
  </code></pre>
  
  <p>As you are probably suspecting one <code>onChange</code> overrides the other depending on the order of the attributes.</p>
  
  <p>With that in mind, what do you think would be the cleanest way to implement support for multiple event handlers for the same event, for the same element in cases like this one? </p>
  
  <p><strong>Edit</strong>
  <hr/>
  I was able to swap <code>onChange</code> and <code>{...this.props}</code> in the component and use </p>
  
  <pre><code>changeHandler: function(event)
  {
          console.log('input_changeHandler change');
          this.props.onChange(event);
  }
  </code></pre>
  
  <p>But I'm concerned if it's safe. </p>