如何綁定來自 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方法中執行此操作，方法是將 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>
        )
    }

});

在這里看到一個工作小提琴。