Reactでの関数のバインド 4つの方法のメモ

# はじめに
Reactでの関数のくっ付け方の方法のメモ
Bind(バインド)ってやつです

## 目次
1. renderの中でくっ付けてしまう
2. renderの中でアロー関数を使う
3. コンストラクタの中でくっ付ける
4. クラスの属性としてアロー関数を使う
5. まとめ

### 1. renderの中でくっ付けてしまう

`onClick={this.clickHandler.bind(this)`で、そのまま行けるんですね。
ただし、これだと複雑になってくると辛そう。。。
Reactを業務で触ってないので、想像でしか無いですが。。

```jsx
import React, { Component } from 'react'

export class EventBind extends Component {
    constructor(props) {
        super(props)

        this.state = {
            message: 'こんにちは'
        }
    }
    clickHandler() {
        this.setState({
            message: 'さようなら'
        })
    }
    render() {
        return (
            <div>
                <button onClick={this.clickHandler.bind(this)}>挨拶</button>
                <p>{this.state.message}</p>
            </div>
        )
    }
}
export default EventBind
```

### 2. renderの中でアロー関数を使う

アロー関数を使用すると、こんな感じ。
`onClick={() => this.clickHandler()}`

```jsx
import React, { Component } from 'react'

export class EventBind extends Component {
    constructor(props) {
        super(props)

        this.state = {
            message: 'こんにちは'
        }
    }
    clickHandler() {
        this.setState({
            message: 'さようなら'
        })
    }
    render() {
        return (
            <div>
                <button onClick={() => this.clickHandler()}>挨拶</button>
                <p>{this.state.message}</p>
            </div>
        )
    }
}
export default EventBind
```

### 3. コンストラクタの中でくっ付ける

これは、公式のドキュメントに載ってるものですね。

```jsx
import React, { Component } from 'react'

export class EventBind extends Component {
    constructor(props) {
        super(props)

        this.state = {
            message: 'こんにちは'
        }
        this.clickHandler = this.clickHandler.bind(this)
    }
    clickHandler() {
        this.setState({
            message: 'さようなら'
        })
    }
    render() {
        return (
            <div>
                <button onClick={this.clickHandler}>挨拶</button>
                <p>{this.state.message}</p>
            </div>
        )
    }
}
export default EventBind
```

### 4. クラスの属性としてアロー関数を使う

アロー関数とクラスの属性を組み合わせると、こんな風にも書けるんですね。

```jsx
import React, { Component } from 'react'

export class EventBind extends Component {
    constructor(props) {
        super(props)

        this.state = {
            message: 'こんにちは'
        }
    }
    clickHandler = () =>{
        this.setState({
            message: 'さようなら'
        })
    }
    render() {
        return (
            <div>
                <button onClick={this.clickHandler}>挨拶</button>
                <p>{this.state.message}</p>
            </div>
        )
    }
}
export default EventBind
```

### 5. まとめ
色々な書き方がありますが、公式のが一番無難かな？？
どこで付けてるのか、すぐに分かるのは大切。
最後に、まとめたのを置いとおきます。

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="js,result" data-user="oq-yuki-po" data-slug-hash="JjoeNjy" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="React Function Bind">
  <span>See the Pen <a href="https://codepen.io/oq-yuki-po/pen/JjoeNjy">
  React Function Bind</a> by oq-Yuki-po (<a href="https://codepen.io/oq-yuki-po">@oq-yuki-po</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>