Webアプリ開発 React.js フロントエンド環境 Part(13)

Javascript

はじめに

こんにちは、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
);

実行結果です。

まとめ

今回も、公式サイトに従い、テスト用ドメインで、イベント処理について実装し確認しました。

イベントハンドラに引数を渡す処理の実装もいずれ必要になると思いますが今回は、ここまでにしました。

コメント

タイトルとURLをコピーしました