在react中，可以利用setState()来修改组件的状态。setState()是用于更新组件状态state的方法，该方法可以对组件state的更改排入队列，也可获取最新的状态，语法为“this.setState( { 要修改的部分数据 } )”。

本教程操作环境：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 (                  
姓名-{this.state.name}
            

登录后复制            {this.state.list.map((item) => (            {item.name}             ))}                    {this.state.isLoading ? “正在加载” : “加载完成”}      >    );  }

二、事件绑定

1.格式

元素>

注意：

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

2.示例

import React from 'react'import ReactDOM from 'react-dom'const title = 
react中的事件
export default class Hello extends React.Component {  fn() {    console.log('mouseEnter事件')  }  render() {    return (      
 console.log('click事件') }            onMouseEnte r = { this.fn }      
    )  }}const content = (  
    {title}    {}  
)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 (              
                    点我              
        )      }}

登录后复制

结果是这样:

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 (      
         { this.handleClick ( ) }}>点我      
    )  }}

登录后复制

方式2：使用bind

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

class App extends React.Component {  state = {    msg: 'hello react'  }  handleClick () {    console.log(this.state.msg)  }  render () {    return (      
        点我      
    )  }}

登录后复制

方式3：

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

class App extends React.Component {  state = {    msg: 'hello react'  }  handleClick = () => {    console.log(this.state.msg)  }  render() {    return (      
        点我      
    )  }}

登录后复制

优点:

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

四、修改组件的状态

注意:

不能通过直接修改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 (      
              
    )  }}

登录后复制

注意事项：

使用受控组件的方式处理表单元素后，状态的值就是表单元素的值。即：想要操作表单元素的值，只需要通过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 (      
                获取文本框的值      
    )  }}

登录后复制

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

以上就是react怎么改变组件状态的详细内容，更多请关注【创想鸟】其它相关文章！