【React】componentでのonClickの使い方

ReactでonClickにメソッドをひもづけたときにundefinedエラーが出た。そのときに対応する方法がいくつかまとめておく。

問題のコード

class App extends React.Component {
  constructor() {
    super()
    this.state = { items: [] }
  }

  addItem() {
    this.setState({
      items: [...this.state.items, this.refs.name.value]
    })
  }

  render() {
    return (
      <div>
	<input ref="name" />
	<button onClick={this.addItem}>追加</button>
        <ul>{this.state.items.map((item, i) => {
          return <li key={i}>{item}</li>
	})}</ul>                                                                                                                                                                                                   
      </div>
    )
  }
}

こちらのコードを実行すると、以下のエラーが出てJavascriptでお決まり(?)のthisの問題。この場合だと、thisはbuttonになるのでsetStateなんてないよと怒られる。

Uncaught TypeError: Cannot read property 'setState' of undefined

方法1

render() {
  return (
    ・・・
    <button onClick={e => this.addItem(e)}>追加</button>
  )
}

方法2

constructor() {
  ・・・
  this.addItem = this.addItem.bind(this)
}

または

render() {
  return (
    ・・・
    <button onClick={this.addItem.bind(this)}>追加</button>
  )
}

方法3

class App extends Component {
  ・・・
  addItem = () => {
    this.setState({
      items: [...this.state.items, this.refs.name.value]
    })
  }
}

方法3は今時点ではBabel限定の書き方みたいだけど。人によって書き方違うから理解しておいた方がよさそう。個人的には方法3が1番わかりやすい。以上です。