class Toggle extends  React.Component {

  constructor (props) {
    super(props);
    this.state = { isToggleOn: true }
    this.handleClick = this.handleClick.bind(this)

  }
  handleClick() {
      //...
  }
  return (

    <button onClick={this.handleClick}>
      {this.state.isToggleOn ? 'on':'off'}
    </button>
  )
}

 

繫結this方式1

class Toggle extends React.Component {
    handleClick = () => {
        // ...this
    } 
}

render () {
    return(
    <button onClick={this.handleClick}>
    Click me
    </button>
)
} 

方式2:箭頭函式（屬性初始化器語法）

class Toggle extends React.Component {
  handleClick () {
    //this ...
  }
  render () {
      return (
        <button onClick = {(e) => this.handleClick(e)}>
        click me 
        </button>
      )
  }
} 
 

方式3: 在回撥函式中使用 箭頭函式

方式3有一個缺點： 每次 Toggle 渲染的時候都會建立一個不同的回撥函式。在大多數情況下，這沒有問題。然而如果這個回撥函式作為一個屬性值傳入低階元件，這些元件可能會進行額外的重新渲染。我們通常建議在建構函式中繫結或使用屬性初始化器語法來避免這類效能問題。