在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 ( <> <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指向的是undefined2.原因: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怎么改变组件状态的详细内容。