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

はじめに

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

目次

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

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

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

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()}

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. コンストラクタの中でくっ付ける

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

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. クラスの属性としてアロー関数を使う

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

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. まとめ

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

See the Pen React Function Bind by oq-Yuki-po (@oq-yuki-po) on CodePen.