与Reactjs相同的事件和元素的多个事件处理程序

Question

我在写输入元素的扩展版本。下面是它的一个简化版本：

var MyInput = React.createClass({ 
    render: function() { 
     return (
      <div> 
       <input type="text" onChange={this.changeHandler} {...this.props} /> 
      </div> 
     ); 
    }, 

    changeHandler: function(event){ 
     console.log('Trigger me first'); 
    } 
}); 

我使用它在这样的背景下：

<MyInput placeholder="Test" value={this.state.myValue} onChange={function(event){ 
    console.log('Trigger me second'); 
}} /> 

正如你可能怀疑一个onChange覆盖其他依赖属性的顺序。

考虑到这一点，您认为对于同一事件实现对多个事件处理程序的支持的最简洁的方法是什么？

编辑

---

我能够交换 onChange和 {...this.props}的组件，并使用

changeHandler: function(event) 
{ 
     console.log('input_changeHandler change'); 
     this.props.onChange(event); 
} 

但我很担心，如果它是安全的。

Answer 1

从这里https://facebook.github.io/react/docs/jsx-spread.html

The specification order is important. Later attributes override previous ones.

的文档所以，如果你把你的onChange蔓延后，它会始终优先。然后您可以调用从您自己的处理程序传入的onChange函数。

var MyInput = React.createClass({ 
    render: function() { 
     return (
      <div> 
       <input type="text" {...this.props} onChange={this.changeHandler} /> 
      </div> 
     ); 
    }, 

    changeHandler: function(event){ 
     console.log('Trigger me first'); 
     if (typeof this.props.onChange === 'function') { 
      this.props.onChange(event); 
     } 
    } 
});