【React】ボタンクリックで表示名が切り替わる超シンプルなプログラム【ES6】
Reactの個人練習で、ボタンクリックで表示される名前が切り替わるだけの超シンプルなプログラムを作った。 以下、簡単な説明付きでコード晒します。
class Test extends React.Component { constructor() { super(); this.state = { click: false // ボタンがクリックされたかどうかをbooleanで管理(デフォルトはfalse) }; this.nameChange = this.nameChange.bind(this); // ES6なのでonClick系はバインド必須 } nameChange() { const nameChangeBool = this.state.click; // ボタンがクリックされたかどうかのboolean値を変数に代入 this.setState({ click: !nameChangeBool // nameChangeBoolがfalseならtrueを、trueならfalseをセット }); } render() { return ( <div> <p>{this.state.click ? 'you' : 'me'}</p> // this.state.clickがfalseなら'me'を、trueなら'you'を表示(三項演算子) <button onClick={this.nameChange}>名前入れ替え!</button> </div> ); } }
万一間違いがあった場合はコメント欄よりご指摘ください。