广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > 其他 >react怎么改变组件状态
  • 302

0
分享到

react怎么改变组件状态

组件状态前端React.js 2023-05-14 21:05:16 302人浏览 安东尼
摘要

本教程操作环境：windows7系统、React18版、Dell G3电脑。一、有状态组件和无状态组件1.先理解一下什么是状态:定义：是用来描述事物在某一时刻的形态的数据 , 一般称为state。(可以简单理解为状态就是数据)例如：9月2

react怎么改变组件状态

本教程操作环境：windows7系统、React18版、Dell G3电脑。

一、有状态组件和无状态组件

1.先理解一下什么是状态:

定义：

是用来描述事物在某一时刻的形态的数据 , 一般称为state。(可以简单理解为状态就是数据)
例如：9月23号时书的库存数量； 18岁时人的身高. Vue中也有相关的概念

特点:

能被改变，改变了之后视图会有对应的变化 (双向数据绑定)

2.有状态组件和无状态组件

有状态组件：能定义state的组件。类组件就是有状态组件。

无状态组件：不能定义state的组件。函数组件又叫做无状态组件

注意:

2019年02月06日，React 16.8版本中引入了 React Hooks，从而函数式组件也能定义自己的状态了。【相关推荐：Redis视频教程、编程教学】

本文主要讲解类组件的状态

3.类组件的状态

1）定义状态

使用 state = { } 来做初始化

import React from "react";

export default class Hello extends React.Component {

  // 这里的state就是状态
  state = {
    list:  [{ id: 1, name: "给我一个div" }],
    isLoading : true
  };
}

2）在视图中使用

 render() {
    return (
      <>
            <h1>姓名-{this.state.name}</h1>
            <ul>
            {this.state.list.map((item) => (
            <li key={item.id}>{item.name}</li>
             ))}
            </ul>
        <div>{this.state.isLoading ? "正在加载" : "加载完成"}</div>
      </>
    );
  }

二、事件绑定

1.格式

<元素 事件名1={ 事件处理函数1 } 事件名2={ 事件处理函数2 } ></元素>\

注意：

React 事件名采用驼峰命名法，比如：onMouseEnter、onFocus、 onClick ......

2.示例

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

const title = <h1>react中的事件</h1>


export default class Hello extends React.Component {
  fn() {
    console.log('mouseEnter事件')
  }
  render() {
    return (
      <div
            onClick = { () => console.log('click事件') }
            onMouseEnte r = { this.fn }
      </div>
    )
  }
}

const content = (
  <div>
    {title}
    {<Hello />}
  </div>
)

ReactDOM.render ( content , document.getElementById ('root') )

注意事项：

  • 事件名是小驼峰命名格式

  • 在类中补充方法

  • this . fn不要加括号：

    • onClick={ this.fn( ) } 此时会先调用fn()，然后将fn的执行结果当做click事件的处理函数

别忘记了写this

三、事件处理-this指向问题

1.问题代码:

class App extends React.Component {
        // 组件状态
      state = {
        msg: 'hello react'
      }
      
      // 事件处理函数
      handleClick() {
            console.log(this) // 这里的this是 undefined
      }
      
      render() {
            console.log(this) // 这里的this是当前的组件实例 App
        
          return (
              <div>
                    <button onClick={this.handleClick}>点我</button>
              </div>
        )
      }
}

结果是这样:

  • render方法中的this指向的是当前react组件。
  • 事件处理程序中的this指向的是undefined

2.原因:

class类和模块的内部，默认就是严格模式，所以不需要使用use strict指定运行模式。只要你的代码写在类或模块之中，就只有严格模式可用,所以类中的函数this指向了undefined

3.解决事件函数this指向:

方式1:

在事件处理程序外套一层箭头函数

缺点：需要在处理函数外额外包裹一个箭头函数, 结构不美观

优点:

前面讲过在 {this.handleClick ( )}这里面调用处理函数的时候不要加小括号,不然里面的程序会立即执行掉,现在在外面包裹一层箭头函数之后,不仅可以加上小括号,还能实现传参,后面会用到

class App extends React.Component {
  state = {
    msg: 'hello react'
  }

  handleClick () {
    console.log(this.state.msg)
  }

  render () {
    return (
      <div>
        <button onClick={ () => { this.handleClick ( ) }}>点我</button>
      </div>
    )
  }
}

方式2：使用bind

通过bind()方法改变函数this指向并不执行该函数的特性解决

class App extends React.Component {
  state = {
    msg: 'hello react'
  }

  handleClick () {
    console.log(this.state.msg)
  }

  render () {
    return (
      <div>
        <button onClick={ this.handleClick.bind (this) }>点我</button>
      </div>
    )
  }
}

方式3：

在class中声明事件处理函数的时候直接使用箭头函数

class App extends React.Component {
  state = {
    msg: 'hello react'
  }

  handleClick = () => {
    console.log(this.state.msg)
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>点我</button>
      </div>
    )
  }
}

优点:

代码简洁,直观,使用最多的一种方式

四、修改组件的状态

注意:

不能通过直接修改state中的值来让视图变化 ! ! !
通过this.setState()方法修改

在react中，setstate是用于更新组件状态state的方法；setState()将对组件state的更改排入队列，并通知React需要使用更新后的state重新渲染此组件及其子组件。

1.语法:

语法：this.setState( { 要修改的部分数据 } )
这是继承自React.Component的修改类组件状态的方法

state = {
    count: 0,
    list: [1, 2, 3],
    person: {
      name: 'jack',
      age: 18
    }
  }
  
  // 【不推荐】直接修改当前值的操作：
  this.state.count++
  ++this.state.count
  this.state.count += 1
  this.state.count = 1
  this.state.list.push(4)
  this.state.person.name = 'rose'
  
  // 【推荐】不是直接修改当前值，而是创建新值的操作：
  this.setState({
    count: this.state.count + 1,
    list: [...this.state.list, 4],
    person: {
      ...this.state.person,
    	// 要修改的属性，会覆盖原来的属性，这样，就可以达到修改对象中属性的目的了  
      name: 'rose'
    }
  })

五、表单处理-受控组件

  • html中表单元素是可输入的，即表单维护着自己的可变状态（value）。
  • 但是在react中，可变状态通常是保存在state中的，并且要求状态只能通过setState进行修改。
  • React中将state中的数据与表单元素的value值绑定到了一起，由state的值来控制表单元素的值
  • 受控组件：value值受到了react控制的表单元素

示例代码:

class App extends React.Component {
  state = {
    msg: 'hello react'
  }

  handleChange = (e) => {
    this.setState({
      msg: e.target.value
    })
  }

   // value 绑定state 配合onChange事件双向绑定
  render() {
    return (
      <div>
        <input type="text" value={this.state.msg} onChange={this.handleChange}/>
      </div>
    )
  }
}

注意事项：

使用受控组件的方式处理表单元素后，状态的值就是表单元素的值。即：想要操作表单元素的值，只需要通过this.setState( { 要修改的部分数据 } )操作对应的状态即可

六、表单处理-非受控组件-ref

  • 受控组件是通过 React 组件的状态来控制表单元素的值
  • 非受控组件是通过手动操作 DOM 的方式来控制
  • ref：用来在 React 中获取 DOM 元素

示例代码:

import { createRef } from 'react'

class Hello extends Component {
  txtRef = createRef()

  handleClick = () => {
    // 文本框对应的 DOM 元素
    // console.log(this.txtRef.current)

    // 文本框的值：
    console.log(this.txtRef.current.value)
  }

  render() {
    return (
      <div>
        <input ref={this.txtRef} />
        <button onClick={handleClick}>获取文本框的值</button>
      </div>
    )
  }
}

（学习视频分享：编程基础视频）

以上就是react怎么改变组件状态的详细内容，更多请关注编程网其它相关文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: react怎么改变组件状态

本文链接: https://www.lsjlt.com/news/205918.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • react怎么改变组件状态
    本教程操作环境：Windows7系统、react18版、Dell G3电脑。一、有状态组件和无状态组件1.先理解一下什么是状态:定义：是用来描述事物在某一时刻的形态的数据 , 一般称为state。(可以简单理解为状态就是数据)例如：9月2...
    99+
    2023-05-14
    组件状态 前端 React.js
  • react如何改变组件状态
    这篇文章主要介绍“react如何改变组件状态”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“react如何改变组件状态”文章能帮助大家解决问题。在react中，可以利用setState()来修改组件的...
    99+
    2023-07-04
  • react中如何修改组件状态
    本篇内容介绍了“react中如何修改组件状态”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ ...
    99+
    2022-10-19
  • react如何改变列表状态
    本篇内容介绍了“react如何改变列表状态”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！react改变列表状态的方法：1、打开相应的reac...
    99+
    2023-07-05
  • react怎么改变组件大小
    本教程操作环境：Windows10系统、react18版、Dell G3电脑。react怎么改变组件大小？手写一个React拖拽调整大小的组件一、实现流程1.使用React.cloneElement加强包裹组件，在包裹的组件设置绝对定位，并...
    99+
    2023-05-14
    组件 React
  • React在组件中如何监听redux中state状态的改变
    目录在组件中监听redux中state状态的改变解决方式React和redux的状态处理在组件中监听redux中state状态的改变 解决方式 1、在组件中引入store 2、在co...
    99+
    2022-11-13
    React组件 监听state的改变 监听redux中state改变
  • react状态组件是什么
    这篇文章主要介绍了react状态组件是什么，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。 react状态组件有2...
    99+
    2022-10-19
  • react如何改变组件大小
    这篇文章主要讲解了“react如何改变组件大小”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“react如何改变组件大小”吧！react改变组件大小的方法：1、使用“React.cloneEl...
    99+
    2023-07-04
  • react如何实现组件状态缓存
    这篇文章主要介绍“react如何实现组件状态缓存”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“react如何实现组件状态缓存”文章能帮助大家解决问题。一、安装第三方库npm i ...
    99+
    2023-07-05
  • 使用react怎么动态改变css样式
    本篇文章为大家展示了使用react怎么动态改变css样式，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。第一种：动态添加class，以点击按钮让文字显示隐藏为demoimport React...
    99+
    2023-06-14
  • React组件状态下移和内容提升怎么实现
    本篇内容介绍了“React组件状态下移和内容提升怎么实现”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！前言两个简单实用的优化组件渲染性能的方...
    99+
    2023-07-04
  • react无状态怎么写
    这篇文章主要介绍了react无状态怎么写，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。 react无状态写法是“...
    99+
    2022-10-19
  • react怎么管理状态
    这篇文章主要介绍“react怎么管理状态”，在日常操作中，相信很多人在react怎么管理状态问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”react怎么管理状态”的疑惑有所帮...
    99+
    2022-10-19
  • React事件监听和State状态修改方式
    目录React事件监听和State状态修改React事件监听相关例子React事件监听和State状态修改 on*函数可直接使用，但只能使用在html标签上，自己创建的组件标签不可 ...
    99+
    2022-11-13
    React事件监听 State状态修改 React 监听事件
  • android登录状态改变功能怎么实现
    要实现Android登录状态的改变功能，可以通过以下步骤实现：1. 创建一个用户登录状态的变量（例如：isUserLoggedIn）...
    99+
    2023-08-26
    android
  • Android Compose状态改变动画animateXxxAsState怎么使用
    今天小编给大家分享一下Android Compose状态改变动画animateXxxAsState怎么使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章...
    99+
    2023-07-04
  • React中无状态组件与高阶组件的示例分析
    这篇文章主要介绍React中无状态组件与高阶组件的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！无状态组件(Stateless Component) 是 React 0.14...
    99+
    2022-10-19
  • react怎么改变数组中的某个元素
    本教程操作环境：Windows10系统、react18.0.0版、Dell G3电脑。react怎么改变数组中的某个元素？怎么通过id更改对应的数组元素React 通过 id 更改对应的数组元素:1.此处有两个组件，父组件App，子组件To...
    99+
    2023-05-14
    React
  • react怎么改变css样式
    本教程操作环境：Windows10系统、react18版、Dell G3电脑。react怎么改变css样式？？react的两种动态改变css样式的方法第一种：动态添加class，以点击按钮让文字显示隐藏为demoimport React, ...
    99+
    2023-05-14
    css React
  • react 怎么改变css样式
    本教程操作环境：Windows10系统、react18.0.0版、Dell G3电脑。react 怎么改变css样式？react的两种动态改变css样式的方法第一种：动态添加class，以点击按钮让文字显示隐藏为demoimport Rea...
    99+
    2023-05-14
    css React
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作