Webアプリ開発 React.js フロントエンド環境 Part(13) | 初心者向けWEB技術と機械学習のBlog

Contents

はじめに
React イベント処理の実装
まとめ

はじめに

こんにちは、swim-loverです。初心者向けのWebアプリ開発記事です。フロントエンド環境にReact.jsを使用しています。Webアプリ開発記事と述べていますが、未だに、公式ページをお手本にしているだけで、まだまだ道は長いです。。。

第12回では、公式サイトに従い、テスト用サブドメインでClockコンポーネントのクラス化について確認しました。(sample11-15)

時刻が更新に関する処理が、Clockクラス内ですべて行われるようになり、コードが見やすくなりました。

引き続き、Reactの勉強を進めていきたいと思います。

React イベント処理の実装

ボタンがクリックされたときのイベント処理の実装です。

28行目でToggleクラスを呼び出します。

Toggleクラスのコンストラクタが実行されます。isTogglwOn=tureで初期化しています。

9行目のbindは、ボタンがクリックされたときのコールバックに必須の処理になります。この行をコメントアウトすると、コードバックが見つからず、ボタンの表示が切り替わりません。

12行目はコールバック処理になります。アロー演算子(=>)は、普段C言語を使っているとまだ不慣れですが、引数prevState でprevState.isToggleOnがtrueでなければ、trueにします。

アロー演算子は、以下を参考にさせていただきました。

JavaScript アロー関数を説明するよ - Qiita

なんとなく使っていたアロー関数を言語化してみました。さっそくアロー関数の説明に入ろうと思うのですが、その前提である関数リテラルについて説明します。##関数リテラルとはリテラルとはソースコードに…

ちなみに、prevStateは、コードのどこにも定義されていません。これは、Reactで予めていぎされている変数と理解するようにしました。

const title= document.querySelector('#hello_world_16');

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
    <Toggle />,
    title
);

実行結果です。