Calling Function on onClick in React

Question

In my Component definition in React, I am appending an eventListener like this:

/* events.js */
export function mouseyDown( event ) {
    console.log( event.target );
}

/* main.js */
import mouseyDown from '../controllers/events.js';
const Topbar = React.createClass ({
    callMouseyDown : function( event ) {
        console.log( event.target );
        mouseyDown(); // actually need to pass event to this method too
    },
    render : function() {
        return (
            <div className="tbIcon" data-action="shareSocial" onClick={ this.callMouseyDown}>G</div>
    )}
});

However, React is giving me this error:

_EventController2.default is not a function

What am I doing wrong?

madox2 · Accepted Answer · 2016-03-02 17:14:23Z

1

Mousedown is not property of created object but function which you have imported. Therefore you need to omit this keyword:

onClick={mouseyDown}

Moreover you need to export your function as default:

export default function mouseyDown( event ) {
    console.log( event.target );
}
// ...
import mouseyDown from '../controllers/events.js';

or use named import:

export function mouseyDown( event ) {
    console.log( event.target );
}
// ...
import {mouseyDown} from '../controllers/events.js';

edited Mar 2, 2016 at 17:14

answered Mar 2, 2016 at 17:06

madox2

52.3k21 gold badges106 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kayote Over a year ago

Thanks, it doesnt seem to work. I get no error, nothing. Ive renamed the onClick function for clarity.

Kayote Over a year ago

You are a genius of the highest order. Thank you.

Collectives™ on Stack Overflow

Calling Function on onClick in React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related