【React入門⑦】イベントを実装してStateを操作する

こちらの記事は、React入門チュートリアルです。

Reactが初めての私がReactを実装していく流れとなるため、初心者の方のつまずきやすいポイントを一通りフォローアップできる内容となっています。

イベントの導入

JavaScriptでおなじみのイベントですが、JSXでも実装することが可能です。
早速、イベントの設定をしてみましょう。

src/App.js

import React, {Component} from 'react';

class Greeting extends Component {
  constructor() {
    super();
  }
　// イベントの設定
  handleClick() {
    alert('clicked!');
  }

  render() {
    return (
　　// onClickでイベント設定
      <button onClick={this.handleClick}>Click me!</button>
    )
  }
}

export default Greeting;

これで以下のようにクリックイベントを実装することができました。

stateの値をイベントで変更する

イベントを実装することによって、stateの値を変更することもできます。

src/App.js

import React, {Component} from 'react';

class Greeting extends Component {
  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
    this.state = {
      time: false
    };
  }

  handleClick() {
    this.setState({
      time: !this.state.time
    })
  }

  render() {
    return (
      <div>
        <p>{this.state.time ? 'Good Morning' : 'Good Afternoon'}</p>
        <button onClick={this.handleClick}>Click me!</button>
      </div>
    )
  }
}

export default Greeting;

上記のコードで以下のような動きになります。

分割して解説をしていきましょう。

  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);

まずこちらですが、Class内でイベントをバインドさせる場合には明示的なバインドが必要となるため、右辺のbindの引数にthisを指定する必要があります。

  handleClick() {
    this.setState({
      time: !this.state.time
    })
  }

またイベントの設定ですが、このコードではhandleClickイベントが発生するたび（クリックされるたび）にtimeというStateの値であるBoolean値が反転するようになっています。

このようなイベントを仕掛ければStateの値も変えられるといううことですね。ポイントはイベントがbindされているということです。