カウントアップ機能
まずは、React Appを編集してHello Reactと表示させる
色々ファイルはありますが、App.jsを編集するとブラウザの表示が変わるので、このファイルを編集していきます。
import React from 'react';
この記述はもともとありました。
class App extends React.Component {
render() {
return (
<h1>Hello React</h1>
);
}
}
export default App;
これは、Progateを参考にしてます。
以上の記述で、ブラウザに「Hello React」と表示されました。
次に、初期値とボタンを表示させる
クラスの中身を以下のように編集します。
class App extends React.Component {
constructor(props) {
super(props);
this.state = {count: 0};
}
render() {
return (
<div>
<h1>
{this.state.count}
</h1>
<button>+</button>
</div>
);
}
}
constructorの中で0という値を持つcountをthis.stateに代入しています。
returnの中で、{this.state.count}とすることで、それを表示させています。
以上の記述で、ブラウザに0とプラスボタンが表示されました。
+ボタンを押すと、数字が一つづつ増えるようにする(カウントアップ機能)
handleClick() {
this.setState({count: this.state.count + 1});
}
まずは、handleClickメソッドを定義します。
setStateメソッドの中で、カウントアップする機能を書いています。
<button onClick={()=>{this.handleClick()}}>+</button>
次に、buttonタグにボタンのクリック時にhandleClickメソッドを発動させる処理を書きます。
全体の記述をまとめるとこうなります。
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {count: 0};
}
handleClick() {
this.setState({count: this.state.count + 1});
}
render() {
return (
<div>
<h1>
{this.state.count}
</h1>
<button onClick={()=>{this.handleClick()}}>+</button>
</div>
);
}
}
export default App;
カウントアップ機能の実装が完了しました！
