如何绑定来自 mixin 的反应事件？

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 方法中执行此操作，方法是将混合的 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 的反应事件？

How do I bind react events from a mixin?

javascript

dom-events

reactjs