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

简述

  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.mfbz.cn/a/571663.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

LLM大语言模型(十三):ChatGLM3-6B兼容Langchain的Function Call的一步一步的详细转换过程记录

# LangChain&#xff1a;原始prompt System: Respond to the human as helpfully and accurately as possible. You have access to the following tools: Calculator: Useful for when you need to calculate math problems, args: {\calculation\: {\description\: \calcul…

云安全防御篇:如何识别并做好服务器DDoS防护?

伴随着全球互联网业务和云计算的快速发展&#xff0c;作为一种破坏力巨大的攻击方式&#xff0c;DDoS攻击正以超出服务器承受能力的流量淹没网站&#xff0c;导致服务器宕机、企业营业额下跌&#xff0c;甚至企业品牌形象受损。越是面对复杂的攻击&#xff0c;就需要性能更强的…

linux安装nacos(单机简易版本)

1. 查看Java版本&#xff0c;必须有jdk支持 2. 下载安装包&#xff0c;解压 下载地址&#xff1a; https://github.com/alibaba/Nacos/releases 2.1 上传到 /opt文件夹 2.2使用解压命令 tar -zxvf nacos-server-2.2.1.tar.gz 2.3 解压后产生文件夹 3. 配置 3.1 修改配置&…

牛客NC98 判断t1树中是否有与t2树完全相同的子树【simple 深度优先dfs C++/Java/Go/PHP】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/4eaccec5ee8f4fe8a4309463b807a542 思路 深度优先搜索暴力匹配 思路和算法这是一种最朴素的方法——深度优先搜索枚举 s 中的每一个节点&#xff0c;判断这个点的子树是否和 t 相等。如何判断一个节点的子树是否…

zabbix6.4告警配置(短信告警和邮件告警),脚本触发

目录 一、前提二、告警配置1.邮件告警脚本配置2.短信告警脚本配置3.zabbix添加报警媒介4.zabbix创建动作4.给用户添加报警媒介 一、前提 已经搭建好zabbix-server 在需要监控的mysql服务器上安装zabbix-agent2 上述安装步骤参考我的上篇文章&#xff1a;通过docker容器安装za…

WEP、WPA、WPA2 和 WPA3:区别和说明

无线网络安全是保持在线安全的一个重要因素。通过不安全的链路或网络连接到互联网是一种安全风险&#xff0c;可能会导致数据丢失、帐户凭据泄露&#xff0c;以及他人在您的网络上安装恶意软件。必须使用适当的 Wi-Fi 安全措施 - 但在这样做时&#xff0c;也必须了解不同的无线…

[Linux初阶]常见的指令

我们学Linux指令&#xff0c;其实就是和学windows一样&#xff0c;学习Linux的操作 一、Linux下基本指令 ls 指令 语法 &#xff1a; ls [ 选项 ] [ 目录或文件 ] 功能 &#xff1a;对于目录&#xff0c;该命令列出该目录下的所有子目录与文件。对于文件&#xff0c;将列出…

就业班 第三阶段(负载均衡) 2401--4.19 day3

二、企业 keepalived 高可用项目实战 1、Keepalived VRRP 介绍 keepalived是什么keepalived是集群管理中保证集群高可用的一个服务软件&#xff0c;用来防止单点故障。 ​ keepalived工作原理keepalived是以VRRP协议为实现基础的&#xff0c;VRRP全称Virtual Router Redundan…

装饰模式【结构型模式C++】

1.概述 装饰模式是一种结构型设计模式&#xff0c; 允许你通过将对象放入包含行为的特殊封装对象中来为原对象绑定新的行为。 2.结构 抽象构件&#xff08;Component&#xff09;角色&#xff1a;定义一个抽象接口以规范准备接收附加责任的对象。具体构件&#xff08;Concrete…

Adobe Illustrator 2024 v28.4.1 (macOS, Windows) - 矢量绘图

Adobe Illustrator 2024 v28.4.1 (macOS, Windows) - 矢量绘图 Acrobat、After Effects、Animate、Audition、Bridge、Character Animator、Dimension、Dreamweaver、Illustrator、InCopy、InDesign、Lightroom Classic、Media Encoder、Photoshop、Premiere Pro、Adobe XD 请…

穿越代码迷雾:解密Tracing技术的神奇力量

穿越代码迷雾&#xff1a;解密Tracing技术的神奇力量 在软件开发和性能优化领域&#xff0c;追踪&#xff08;Tracing&#xff09;技术是一种重要的工具&#xff0c;用于收集和分析程序的执行过程和性能数据。本文将深入讲解Tracing的原理、工作方式以及在不同领域的应用场景&a…

sql题目练习

cookie注入 解题思路和之前的整数型注入一样&#xff0c;只是比整数型注入多了一步&#xff0c;题目没有给输入框&#xff0c;提示“尝试找找cookie吧”cookie的中文翻译是曲奇&#xff0c;小甜饼的意思。cookie其实就是一些数据信息&#xff0c;类型为“小型文本文件”&#…

【笔试强训】day10

1.最长回文子串 思路&#xff1a; 常规思路就是dp。dp[i][j]表示字符串i-j是否是回文子串。 如果A[i]A[j]&#xff0c;考虑以下几种情况&#xff1a; 长度小于3&#xff0c;说明一定是回文。 要想让dp[i][j]为真&#xff0c;则dp[i1][j-1]必须也为真。否则就是false.即dp[i…

【亲测有效】connection refused报错 为什么redis 进程突然挂掉,频繁出现redis 进程突然挂掉情况解决方案

linux服务器redis 进程突然挂掉&#xff0c;频繁出现redis 进程突然挂掉情况解决方案&#xff0c;出现connection refused报错 前期出现过几次没当回事&#xff0c;但是最近频繁出现甚至有事&#xff0c;一天出现好几次就排查了一下问题 redis 进程突然挂掉常见原因 内存不足…

【后端】git与python的结合使用

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、git介绍二、git常见使用三、git与python的结合使用四、总结 前言 随着开发语言及人工智能工具的普及&#xff0c;使得越来越多的人会主动学习使用一些开发…

ctfshow web41-web50

web41 代码审计 <?php if(isset($_POST[c])){$c $_POST[c]; if(!preg_match(/[0-9]|[a-z]|\^|\|\~|\$|\[|\]|\{|\}|\&|\-/i, $c)){eval("echo($c);");} }else{highlight_file(__FILE__); } ?> 过滤了&#xff1a;[0-9] [a-z] ^ ~ $ [ ] { } & -…

介绍一个开源IOT组态项目

项目介绍 金合可视化平台是一款强大而操作简便的低代码平台&#xff0c;专为满足物联网领域的可视化开发需求而设计。通过该平台&#xff0c;用户可以利用拖拽配置的方式&#xff0c;轻松创建个性化的可视化大屏&#xff0c;无需熟练的编程技能&#xff0c;大幅提高了开发效率。…

报错import build constraints exclude all Go files in

好久没用fyne突然报错 报错import ...go-gl.. build constraints exclude all Go files in go-gl .. 检查gcc --version正常输出 检查gcc版本正常&#xff0c;路径正常。 尝试解决的方法&#xff0c; 1.重新安装依赖&#xff0c;不行 2.重新配置下载地址&#xff0c;不…

制作github.io学术个人主页

制作如图的学术个人主页。About me - Xianwen Ling’s Blog 学术个人主页是一个学者展示个人学术成果和研究方向的重要工具。个人主页可以集中展示学者的研究论文、出版物、演讲和发布的项目等学术成果&#xff0c;这样其他人可以更方便地了解和评估学者的研究贡献。个人主页可…

基于uni-app的动态表单

一、应用场景和意义 可以通过配置字段和校验规则&#xff0c;快速完成页面开发、提升开发效率 二、应用前提 形成ui/业务规范&#xff0c;最好是应用在问卷调查之类的业务 三、动态表单的功能 字段报错、快速滚动定位报错信息、支持字段值和字段规则拆分&#xff0c;便于实…