Reactでカウントアップ機能を作る

カウントアップ機能を作る

+ボタンを押すと1ずつ数字が増えていくカウントアップ機能をReactでつくる。

stateを定義する

constructor内でプロパティ名がcount、値が0のstateを定義する。

constructor(props) {
    super(props);
    this.state = {count:0};
  }

ボタンとつくり、stateを表示

ボタンはbuttonのタグを使ってつくる。そして前述で定義したstateをreturn内で表示させる。その際、this.state.countはJavascriptなので、{}で囲む。

render() {
    return (
      <div>
        <h1>{this.state.count}</h1>

        <button>+</button>
      </div>
    );
  }

handleClickを定義

handleClickのメソッドを定義して、stateのcountの値に1を足す処理を追加する。

handleClick(){
    this.setState({count: this.state.count + 1});
  }

buttonタグにonClickイベントを追加

buttonタグにonClickのイベントを追加して、onClickのイベント時に前述で定義したhandleClickのメソッドが呼び出されるようにする。

<button onClick={()=>{
    this.handleClick()
    }
}>+</button>

最後に

洗練さんでインターン(Progate React)です。
Progate React

GitHubのレポジトリ

最後に
現在ここでインターンしています。
まだまだ駆け出しですが頑張ります！やる気は人一倍です！
洗練