Question

我想为工具提示编写一个简单的mixin。我已经知道如何将我的mixin绑定到DOM事件：

componentDidMount: function() {
    var el = this.getDOMNode();
    el.addEventListener('mouseenter', this.mouseenter, false);
    el.addEventListener('mouseleave', this.mouseleave, false);
},

...但我想绑定到React事件，以利用其一致的事件系统。我该怎么做？

Answer 1

我认为您可能希望在混合组件的render方法中执行此操作，方法是将mixin的mouseenter和mouseleave处理程序作为道具传递。我认为一个选项可能如下所示：

var MouseMixin = {

    getMouseProps: function() {
        return {
            onMouseEnter: this.mouseenter,
            onMouseLeave: this.mouseleave
        }
    },

    mouseenter: function() {
        console.warn('mouseenter', arguments)
    },

    mouseleave: function() {
        console.warn('mouseleave', arguments)
    }
};

然后，除了将其混合之外，您还需要应用该行为。在React 0.12中的JSX中，您可以使用...扩展运算符来帮助解决这个问题：

var Example = React.createClass({

    mixins: [MouseMixin],

    render: function() {
        return (
          <div { ...this.getMouseProps() }>
              Hello world
          </div>
        )
    }

});

See a working fiddle here.

如何绑定mixin中的反应事件？

1 个答案: