React 之 内置方法setState改变state(一)

ops/2024/12/23 1:17:08/

简述

  1. this.setState 方法是React组件类(React.Component 的子类)的一个内置方法。当你在创建一个React组件类时,你继承自 React.Component,因此你的组件类会自动获得this.setState 方法。
  2. this.setState 用于更新组件的state。当state更新时,React会重新渲染该组件及其子组件。

使用this.setState代码栗子:

//以下为组件 Board 的代码(一个React 组件类对象)
class Board extends React.Component {//构造函数来初始化 state(状态)//在 JavaScript classes(类)中, 在定义子类的构造函数时,你需要始终调用 super 。	          			   //所有具有 constructor 的 React 组件类都应该以 super(props) 调用启动它。constructor(props) {super(props);this.state = {  //等同于vue的data属性squares: Array(9).fill(null),};}handleClick(i) {  //等同于vue2的method属性内定义的方法const squares = this.state.squares.slice();squares[i] = 'X';//调用内置方法this.setState更新数据状态this.setState({squares: squares});}renderSquare(i) {return (//这里的Square 是另外一个组件,这里没写<Square   value={this.state.squares[i]}onClick={() => this.handleClick(i)}/>);}render() {const status = 'Next player: X';// 以下等同于vue的模版template,  XML 的标签。你的组件告诉 React 你要呈现的内容return (   <div><div className="status">{status}</div><div className="board-row">{this.renderSquare(0)}{this.renderSquare(1)}{this.renderSquare(2)}</div><div className="board-row">{this.renderSquare(3)}{this.renderSquare(4)}{this.renderSquare(5)}</div><div className="board-row">{this.renderSquare(6)}{this.renderSquare(7)}{this.renderSquare(8)}</div></div>);}
}

http://www.ppmy.cn/ops/19217.html

相关文章

C++ //练习 13.40 为你的StrVec类添加一个构造函数,它接受一个Initializer_list<string>参数。

C Primer&#xff08;第5版&#xff09; 练习 13.40 练习 13.40 为你的StrVec类添加一个构造函数&#xff0c;它接受一个Initializer_list参数。 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&#xff1a;vim 代码块 /****************************…

【STM32+HAL+Proteus】系列学习教程4---GPIO输入模式(独立按键)

实现目标 1、掌握GPIO 输入模式控制 2、学会STM32CubeMX配置GPIO的输入模式 3、具体目标&#xff1a;1、按键K1按下&#xff0c;LED1点亮&#xff1b;2、按键K2按下&#xff0c;LED1熄灭&#xff1b;2、按键K3按下&#xff0c;LED2状态取反&#xff1b; 一、STM32 GPIO 输入…

Arco design 发布到生成环境F5刷新报错404

问题&#xff1a;开发环境没问题&#xff0c;生成环境正常跳转也没问题但是F5刷新报错 解决办法一&#xff1a;修改 history: createWebHistory(), 改为history: createWebHashHistory(),

Java设计模式 _创建型模式_建造者模式(Builder)

一、建造者模式 1、建造者模式&#xff08;Builder Pattern&#xff09;是一种创建对象的设计模式。它允许你使用不同的构建策略来创建复杂对象。通常是在复杂类中通过静态内部类&#xff08;Builder&#xff09;来进行构建。 2、实现思路&#xff1a; &#xff08;1&#xf…

8086:qemu执行汇编

正文 环境&#xff1a;macOS M1。 QEMU&#xff08;Quick EMUlator&#xff09;是一个开源的虚拟机监视器&#xff0c;可以模拟多种硬件平台&#xff0c;包括处理器架构、设备和操作系统。QEMU具有以下主要功能和用途&#xff1a; 硬件模拟器&#xff1a;QEMU可以模拟多种处理…

PDF 书签制作与调整 从可编辑、不可编辑 PDF 文档创建书签的方法

本文是对以前发表的旧文拆分&#xff0c;因为原文主题太多&#xff0c;过长&#xff0c;特另起一篇分述。 第一部分 由可编辑 PDF 文档创建书签 方法 1. Adobe Acrobat Pro autobookmark AutoBookmark 是一个可用于 Adobe Acrobat 自动生成书签的插件。 官方下载地址&…

机器学习-线性回归普通最小二乘法运用的经典基本假设有哪些?

在线性回归中&#xff0c;普通最小二乘法&#xff08;Ordinary Least Squares&#xff0c;OLS&#xff09;是一种常用的参数估计方法。它基于一些经典的基本假设&#xff0c;包括以下几个方面&#xff1a; 线性关系&#xff1a;OLS假设因变量&#xff08;被解释变量&#xff0…

Docker基础学习(5.Docker镜像命令)

⭐ 作者简介&#xff1a;码上言 ⭐ 代表教程&#xff1a;Spring Boot vue-element 开发个人博客项目实战教程 ⭐专栏内容&#xff1a;个人博客系统 ⭐我的文档网站&#xff1a;http://xyhwh-nav.cn/ ⭐微信公众号&#xff1a;码上言 文章目录 Docker run流程镜像是什么&a…