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

react.js

2018.03.292023.04.06

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

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")
)

サンプル