javascript-events,reactjs , How do I bind react events from a mixin?


How do I bind react events from a mixin?

Question:

Tag: javascript-events,reactjs

I want to write a simple mixin for a tooltip. I already know how to bind my mixin to DOM events:

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

...but I'd like to bind to the React events instead, to take advantage of its consistent event system. How do I do it?


Answer:

I think you probably want to do this in the render method of the mixing component, by passing in the mixin's mouseenter and mouseleave handlers as props. I think one option might look like this:

var MouseMixin = {

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

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

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

Then, in addition to mixing this in, you'd need to apply the behavior. In JSX in React 0.12, you can use the ... spread operator to help with this:

var Example = React.createClass({

    mixins: [MouseMixin],

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

});

See a working fiddle here.


Related:


No call function of parent in Reactjs


javascript,jquery,ruby-on-rails,reactjs
I have two function in Reactjs. When function one call a function of function two. There have error same as "Uncaught TypeError: this.props.onButonShowClick is not a function" This is function one : var HiddenEdit = React.createClass({ _handleOnClick: function(e) { e.preventDefault(), this.props.onButonShowClick(true); }, render: function() { return (<span className="col-lg-2 btn-action-group"> <a...

Reactjs this.state giving Uncaught TypeError: Cannot read property 'groupsData' of null


javascript,ajax,reactjs
I am doing 2 basic ajax calls to 2 different apis in one of my ReactJs components. Although, when running the call (on urls I know for certain are working and returning data), I receive: Uncaught TypeError: Cannot read property 'groupsData' of null Here is the single component: var BrowseWidgetBox...

What is the proper way to get the value of a React