React：将函数作为道具传递

Question

I have a question concerning passing functions as props. In the tic-tac-toe tutorial ( https://facebook.github.io/react/tutorial/tutorial.html ) at the end the Game component passes the onClick handler as such:

<div className="game-board">
  <Board
    squares = { current.squares }
    onClick = {(i) => this.handleClick(i) }
  />
</div>

First, why cant we pass the function like this instead:

onClick = { this.handleClick(i) }

And I understand that passing "i" is important but something in the middle of the tutorial confused me:

return <Square value={this.state.squares[i]} onClick={() => this.handleClick(i)} />;

Here we don't pass "i" in the parenthesis of the arrow function. I don't want to write too much to make the question less verbose. I am sure some people have gone through this tutorial and will be able to give an answer my questions.

UPDATE: Tnx everyone for the brief and helpful answers. As a follow-up, in the official docs, we are told to bind a function if it is to be used as an event handler for a component. Why is this necessary and how come it was never used it the tutorial?

Answer 1

This doesn't pass the function (it calls the function before binding to onClick ):

onClick = { this.handleClick(i) }

Alternatively, you could bind:

onClick = { this.handleClick.bind(null, i) }

But the arrow function seems clearer to read (at least IMHO).

For the second issue, the i is a parameter for handleClick , not onClick . onClick does have parameters (the first being the event object), but in this case, you don't need anything from the onClick parameters, so they are left empty.

Answer 2

What you put in the onClick parameter will execute during the rendering process, which is not what you want to do. You want to execute some actions during a DOM event.

That's why the tutorial gives you the fat arrow syntax: it means that you are calling a function that returns another function (in this case your handleClick method) so when the markup is rendered, it will execute the function inside the parameter and return your function, that will do the real job when a user clicks on the element.

Answer 3

As Davin said,

onClick = { this.handleClick(i) }

This expression actually calls that function, now then how to pass arguments to the function, see there are 2 ways:

First: In this function, you can use your argument i and this object, which refers to current component.

(i) => this.handleClick(i)

Second: Here, you can use your argument but cannot use this object of the component, where null will be DOM element on which event is fired.

this.handleClick.bind(null, i)