所属分类:web前端开发
在react中,可以利用setState()来修改组件的状态。setState()是用于更新组件状态state的方法,该方法可以对组件state的更改排入队列,也可获取最新的状态,语法为“this.setState( { 要修改的部分数据 } )”。
本教程操作环境:Windows7系统、react18版、Dell G3电脑。
定义:
是用来描述事物在某一时刻的形态
的数据 , 一般称为state。(可以简单理解为状态就是数据)
例如:9月23号时书的库存数量; 18岁时人的身高. vue中也有相关的概念
特点:
能被改变,改变了之后视图会有对应的变化 (双向数据绑定)
有状态组件:能定义state的组件。类组件就是有状态组件。
无状态组件:不能定义state的组件。函数组件又叫做无状态组件
注意:
2019年02月06日,React 16.8版本中引入了 React Hooks,从而函数式组件也能定义自己的状态了。【相关推荐:Redis视频教程、编程教学】
本文主要讲解类组件的状态
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 } 事件名2={ 事件处理函数2 } ></元素>
\
注意:
React 事件名采用驼峰命名法,比如:onMouseEnter、onFocus、 onClick ......
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
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>
)
}
}
登录后复制
结果是这样:
undefined
class
类和模块的内部,默认就是严格模式,所以不需要使用use strict
指定运行模式。只要你的代码写在类或模块之中,就只有严格模式可用,所以类中的函数this指向了undefined
在事件处理程序外套一层箭头函数
缺点:需要在处理函数外额外包裹一个箭头函数, 结构不美观
优点:
前面讲过在 {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>
)
}
}
登录后复制
通过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>
)
}
}
登录后复制
在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重新渲染此组件及其子组件。
语法: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'
}
})
登录后复制
setState
进行修改。由state的值来控制表单元素的值
示例代码:
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( { 要修改的部分数据 } )
操作对应的状态即可
示例代码:
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怎么改变组件状态的详细内容,更多请关注zzsucai.com其它相关文章!