如何绑定来自混音的反应事件

How do I bind react events from a mixin?

本文关键字：事件 何绑定 绑定      更新时间：2023-09-26

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

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

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

我认为您可能希望在混合组件的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 中，您可以使用 ... spread 运算符来帮助解决这个问题：

var Example = React.createClass({
    mixins: [MouseMixin],
    render: function() {
        return (
          <div { ...this.getMouseProps() }>
              Hello world
          </div>
        )
    }
});

在这里看到一个工作的小提琴。

相关文章：