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

具有Reactjs的同一事件和元素的多个事件处理程序

1 个答案: