React state 对象

定义和使用

React 组件具有内置的 state 对象。

state 对象是您存储属于该组件的属性值的位置。

当 state 对象更改时，组件将重新渲染。

注意，本教程 React 代码环境围绕 npm 的构建环境进行学习，如不懂可以先阅读 React 环境搭建这章进行了解学习

创建一个 state 对象

state 对象在构造函数中初始化。

在构造方法中指定状态对象：

index.js：

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {brand: "Ford"};
  }
  render() {
    return (
      <div>
        <h1>我的一辆车</h1>
      </div>
    );
  }
}

state 对象可以包含任意多个属性：

指定组件需要的所有属性：

index.js：

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  render() {
    return (
      <div>
        <h1>我的一辆车</h1>
      </div>
    );
  }
}

使用 state 对象

使用 this.state.propertyname 语法在组件中的任何位置引用 state 对象。

在 render() 方法中引用状态对象：

index.js：

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

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  render() {
    return (
      <div>
        <h1>我的一辆 {this.state.brand} 车</h1>
        <p>
          它的颜色是 {this.state.color}；
          模型是 {this.state.model}；
          生产于 {this.state.year}。
        </p>
      </div>
    );
  }
}

ReactDOM.render(<Car />, document.getElementById('root'));

运行结果如下：

更改 state 对象

要更改 state 对象中的值，请使用 this.setState() 方法。

当 state 对象中的值更改时，组件将重新渲染，这意味着输出将根据新值更改。

添加带有 onClick 事件的按钮，该按钮将更改 color 属性：

index.js：

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

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  changeColor = () => {
    this.setState({color: "blue"});
  }
  render() {
    return (
      <div>
        <h1>我的一辆 {this.state.brand} 车</h1>
        <p>
          它的颜色是 {this.state.color}；
          模型是 {this.state.model}；
          生产于 {this.state.year}。
        </p>
        <button type="button" onClick={this.changeColor}>点击更改颜色</button>
      </div>
    );
  }
}

ReactDOM.render(<Car />, document.getElementById('root'));

运行结果如下：

始终使用 setState() 方法更改状态对象，这将确保组件知道其已更新并调用 render() 方法（以及所有其他生命周期方法）。

定义和使用

创建一个 state 对象

使用 state 对象

更改 state 对象

相关页面