はじめに
こんにちは、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にします。
アロー演算子は、以下を参考にさせていただきました。
ちなみに、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
);
実行結果です。
まとめ
今回も、公式サイトに従い、テスト用ドメインで、イベント処理について実装し確認しました。
イベントハンドラに引数を渡す処理の実装もいずれ必要になると思いますが今回は、ここまでにしました。
組み込み系ソフトエンジニアをしています。これまでフロントエンド技術は避けてきましたが、食わず嫌いをやめて、勉強を始めました。
趣味は、水泳、ロードバイク、ランニング、登山です。
組み込み系技術ネタ、勉強したフロントエンド技術、たまに趣味の運動について発信していきます。
どうぞよろしくお願いします。
コメント