IT技术 - 具有 Reactjs 的同一事件和元素的多个事件处理程序 - 吾爱随笔录

我正在编写输入元素的扩展版本。这是它的简化版本：

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

但我担心它是否安全。

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