カウントアップ機能を作りために必要な要素が
・イベント
・state
この2つになります。
イベントによってクリックしたときの機能を追加し、stateでクリック時の表示を変更する、これが大まかな流れになります。
stateを使うとき3つのステップがあります。
・最初の値の定義
・その値をサイトに表示させる
・クリックされた時、最初の値から+1する
この順番で行います。
this.state = {count:0};
このように最初に値を定義します。
次にreactファイルのreturn内で
{this.state.count}
と書いて、HTMLで表示されるようにします。
この3つ目でメソッドを定義し、その中にstateを書きます。
handleClick(){
this.setState({count:this.state.count+1});
}
とすることでクリックしたとき、stateを変更し値が変わるようにします。
上記によってhandleClickというメソッドが作成できました。
これをonClickイベントでボタンタグに入れることでカウントアップボタンが作成できます。
<button onClick = {() => this.handleClick()}}></button>
完成はこのようになります。
まとめとしてはメソッドにstateの定義、表示、変更のcodeを書き込み、onClickイベントでクリックしたとき、stateの内容が変更されることでカウントアップできる仕組みになっています。
以上がカウントアップ機能の作成になります。
間違いや指摘があればお願いします。