Reactコンポーネントのステート（状態）を管理する

Reactコンポーネントのステート（状態）を管理する

Reactコンポーネントのステートとは、たとえばラジオボタンの何れがオンになっているかという状態を管理記憶するための機能です。

stateオブジェクトを使用することで実現します。

コンポーネントのステートはコンストラクタで初期化する

ステートはコンストラクタで初期化します。以下、例です。

class Test extends React.Component {
  constructor (props) {
    super(props);
    this.state = {i : 1};// 初期化
  }
}

iには、this.state.iでアクセスすることができます。

stateの状態を変更するには代入するには、setStateメソッドを使用して変更します。

stateのルール

• 変更する際はsetStateメソッドで変更する

class Test extends React.Component {
  constructor (props) {
    super(props);
    this.state = {i : 1};
  }
  // クラスのメソッド
  click() {
    this.setState({i : this.state.i + 1})
  }
  render() {
    return (
      <div>
        <button onClick={this.click.bind(this)}>押して{this.state.i}</button>
      </div>
    )
  }
}
ReactDOM.render(
  <Test />,
  document.getElementById("koko")
)

サンプル

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
資格：少額短期保険募集人,FP3級,宅建士