javascriptreactjsecmascript-6callback

Why is the return not excuted?

my codes

console results

Here are my React codes. I know that if you write a function with a parenthesis, it will be called immediately (in this case, it will be called when elements render, I have four 'li's) rather than being called as a callback when the event is triggered. But what I can't understand is, why the console.log('first') got excuted and the console.log('second') in return function doesn't? The return function should be excuted right after console.log('first'), and 'second' will be log in console, shouldn't it? What is the principle here?

Thanks for all answers.

Solution

  • The issue is that you are calling the function incorrectly. The correct way to call the function in <li> tag is below:

    <li onMouseEnter={() => this.handleMouse(true)()} onMouseLeave={() => this.handleMouse(false)()}>

    1. In your code, instead of passing function reference you are calling the function, hence first getting executed as soon as your component loads up.
    2. It then returns another function, but that function never runs on the event because you are passing the returned function’s result (undefined) instead of the function itself.