鍍金池/ 問答/HTML/ React綁定onClick為什么要用箭頭函數(shù)？

React綁定onClick為什么要用箭頭函數(shù)？

最近開始學(xué)習(xí)react，剛看完官方的教程TicTacToe，對onClick事件綁定的語法不是很理解，所以來這里提問，求大家?guī)兔獯?。下面是官方教程里的代碼：

class Board extends React.Component {
  constructor() {
    super();
    this.state = {
      squares: Array(9).fill(null),
      xIsNext: true,
    };
  }

  handleClick(i) {
    const squares = this.state.squares.slice();
    squares[i] = this.state.xIsNext ? 'X' : 'O';
    this.setState({
      squares: squares,
      xIsNext: !this.state.xIsNext,
    });
  }

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

  render() {
    const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

其中這一段：

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

綁定onClick事件時，為什么不直接寫成onClick={this.handleClick(i)}呢？

箭頭函數(shù)等同于

function() {
  return this.handleClick(i);
}

的話，那么我的理解兩種寫法應(yīng)該是等效的，但第二種貌似過不了編譯。剛?cè)腴T很多不懂，求大家解答一下，十分感謝！

回答
編輯回答
墨小白

...
onClick={這里是一個函數(shù)或函數(shù)引用}
onClick={() => this.handleClick(i)}，這里面就是一個匿名函數(shù)，點擊事件發(fā)生時，會執(zhí)行這個匿名函數(shù)，匿名函數(shù)再調(diào)用handleClick函數(shù)(傳參i)；其次才是this綁定的問題

2017年9月18日 11:52
編輯回答
奧特蛋

React向事件處理程序傳遞參數(shù)示例：

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

上述兩種方式是等價的，分別通過 arrow functions 和 Function.prototype.bind 來為特定事件類型添加事件處理程序。

參考官方翻譯文檔：React官方翻譯文檔
2018年1月20日 12:15
編輯回答
妖妖

為了綁定this作用域，我看到的還有這種綁定的方式，具體可以看這里：http://www.css88.com/react/do...

2017年4月16日 01:31
編輯回答
哚蕾咪

會繼承事件本身的this，還有一種寫法： const handleClick = ()=>{.....},<button onClick = "this.
handleClick"></button>

2017年12月21日 12:35
編輯回答
汐顏

使用箭頭函數(shù)，能保證handleClick內(nèi)的this指向當(dāng)前組件對象，你的第二種寫法，需要手動綁定this，不然handleClick內(nèi)的this是不指向當(dāng)前組件對象的。
我寫過一篇React中如何進行事件處理的文章，你可以參考下：https://segmentfault.com/a/11...

2017年5月9日 17:35
編輯回答
入她眼

因為箭頭函數(shù)不會綁定自己的this，

如果不用箭頭函數(shù)，需要手動綁定函數(shù)的this：onClick={() => this.handleClick.bind(this)(i)}

或者在定義的時候就用箭頭函數(shù)：

handleClick = (i) => {
    //do it
}
onClick = {this.handleClick}
2018年8月2日 20:37
編輯回答
遲月

在使用ES6 classes或者純函數(shù)時，React不會自動綁定this到當(dāng)前組件上，需要手動實現(xiàn)this的綁定。

bind方法

<button onClick={this.handleClick.bind(this)}>Click</button>

構(gòu)造器內(nèi)聲明

class Button extends React.Component{
  constructor(){
    this.handleClick=this.handleClick.bind(this);
  }
  render(){
    return <button onClick={this.handleClick}>Click</button>
  }
}

箭頭函數(shù)

箭頭函數(shù)可以自動綁定定義此函數(shù)作用的this，因此不需要bind。

<button onClick={() => this.handleClick()}>Click</button>
2017年5月12日 09:56
編輯回答
兮顏

如果為了性能，不建議 <Square onClick={() => this.handleClick(i)} />,
建議 <Square i={i} onClick={this.handleClick} />,

2018年4月20日 08:37
編輯回答
神經(jīng)質(zhì)

我記得這個下棋的例子是官方demo
但是官方的文檔里面，很多地方的事件綁定是在constructor里面用bind綁定的。

2018年7月11日 15:50
編輯回答
笨小蛋

看到這么多奇怪的評論忍不住注冊個賬號上來說兩句。這幾十個回復(fù)是怎么回事??！不要誤人子弟好不，跟this有半毛錢關(guān)系么？？？完全是為了傳參好不！如果你不需要傳參寫onClick={this.funcName}不行的話你來找我！

2018年5月27日 06:29