【React】関数を使ってstateの値を変える

Reactにはpropsとよく似たものにstateという機能があります。
こちらもコンポーネントに対して値を渡すことができる機能ですが、
propsが静的な値（変化しない値）である一方、stateはコンポーネント内で値を変更させることができます。

以下がその使用例です。

import React, { Component } from 'react';

const App = () => (
    <Counter></Counter>
  )

class Counter extends Component {
  constructor(props) {
    super(props) // 親コンポーネントでpropsの初期化処理
    this.state = { count: 0} // stateの値を設定する
  }

  render() {
    return (
    <div>
    { this.state.count } // stateを出力
    </div>)
  }
}
export default App;

このように記述することによって0という値が入ったcountというstateがコンポーネントに渡されます。

上記のコードを使いつつ、stateの値を上下させる関数を設定しました。

import React, { Component } from 'react';

const App = () => (
    <Counter></Counter>
  )

class Counter extends Component {
  constructor(props) {
    super(props)
    this.state = { count: 0}
  }

 // stateの値を上げるための関数
  handlePluss = () => {
    this.setState( { count: this.state.count + 1 } )
  }
 // stateの値を下げるための関数
  handleMinus = () => {
    this.setState({ count: this.state.count - 1 });
  }

  render() {
    return (
    <div>
    { this.state.count }
　// onClickでイベントの設定
    <button onClick={this.handlePluss}>+1</button> 
    <button onClick={this.handleMinus}>-1</button>
    </div>)
  }
}
export default App;

これでstateの値を変えることができるボタンが設置できました。