Reactを使う 4 - state -

今回はstateを使ってみたいと思います。

state

propsとの違いは、値の変更が可能で
コンポーネント作成後でも値を設定できます。

サンプルとして今回はいいねボタンを作成してみたいと思います。
最終的な完成版がこちら↓

しょぼいというツッコミは無しで・・

コンポーネント作成

---

構成は今までと同じで以下の通りです。

.
├── index.html
├── package.json
├── src
│   ├── container.js
│   └── good_button.jsx ☆
└── webpack.config.js

今回新たにgood_button.jsxを作成します。
最終的な内容がこちら↓

import React from 'react';
import ReactDOM from 'react-dom'

class GoodButton extends React.Component {
  constructor() {
    super();
    // [1]
    this.state = {
      goods: 0
    };
    this.handleClick = this.handleClick.bind(this); // [4]
  }

  handleClick() {
    this.setState({goods: this.state.goods + 1}); // [3]
  }

  render() {
    return (
      // [2]
      <button onClick={this.handleClick}>
        +{this.state.goods}
      </button>
    );
  }
}

ReactDOM.render(
  <GoodButton />,
  document.getElementById('container')
);

GoodButtonクラスは今回goodsというstateの値を持っています。

まずコンストラクタでgoodsを0に初期化しています。・・・[1]

次にボタンが押されたイベントでthis.handleClickを指定しています。・・・[2]

handleClickでは現在のgoodsの値を+1しています。・・・[3]

とまあいたってシンプルです。

ちなみに・・
[4]の処理は何をしているかというと、handleClick内でthisを使ってますが
[4]の処理がないとbuttonのthisになってしまいエラーになってしまいます。

試しに[4]の処理をコメントアウトして実行するとコンソールに
以下のエラーが表示されました。

今回のはしょぼいですが、CSSをちゃんと使ってかっこいいボタンも作れると思います。