ページ

2016年9月25日日曜日

Reactを使う 4 - state -


今回はstateを使ってみたいと思います。
state
propsとの違いは、値の変更が可能で
コンポーネント作成後でも値を設定できます。

サンプルとして今回はいいねボタンを作成してみたいと思います。
最終的な完成版がこちら↓
gif1
しょぼいというツッコミは無しで・・

コンポーネント作成

構成は今までと同じで以下の通りです。
.
├── 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の値を持っています。
まずコンストラクタでgoods0に初期化しています。・・・[1]
次にボタンが押されたイベントでthis.handleClickを指定しています。・・・[2]
handleClickでは現在のgoodsの値を+1しています。・・・[3]
とまあいたってシンプルです。

ちなみに・・
[4]の処理は何をしているかというと、handleClick内でthisを使ってますが
[4]の処理がないとbuttonのthisになってしまいエラーになってしまいます。
試しに[4]の処理をコメントアウトして実行するとコンソールに
以下のエラーが表示されました。


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

0 件のコメント:

コメントを投稿