반응에서는 setState()를 사용하여 구성 요소의 상태를 수정할 수 있습니다. setState()는 구성 요소 상태를 업데이트하는 데 사용되는 메서드입니다. 이 메서드는 변경 사항을 구성 요소 상태에 추가할 수 있으며 최신 상태를 가져올 수도 있습니다. 구문은 "this.setState(수정할 데이터의 일부 })"입니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, React18 버전, Dell G3 컴퓨터.
정의:
는 에서 특정 순간의 사물의 모양을 설명하는 데 사용됩니다. /code>의 某一时刻的形态的数据 , 一般称为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>
)
}
}结果是这样:
undefinedclass类和模块的内部，默认就是严格模式，所以不需要使用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()data
state
라고 합니다. (상태는 데이터라고 간단히 이해하시면 됩니다)🎜예: 9월 23일의 책 재고 수량. 18세의 키. vue🎜🎜🎜특징:🎜🎜🎜에도 관련 개념이 있습니다. 변경 후에는 변경될 수 있습니다(양방향 데이터 바인딩)🎜state = { }를 사용하여 초기화🎜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'
}
})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>
)
}
}< 요소 이벤트 이름 1={이벤트 처리 함수 1} 이벤트 이름 2={이벤트 처리 함수 2} ></Element>🎜🎜🎜Note🎜:🎜🎜React 이벤트 이름은 다음과 같은 카멜 표기법을 사용합니다. : onMouseEnter , onFocus, onClick...🎜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>
)
}
}onClick={ this.fn( ) } 이때 fn()이 먼저 호출되고 fn의 실행 결과가 처리로 사용됩니다. 클릭 이벤트 기능정의되지 않음class 내부적으로 기본 모드는 strict 모드이므로 실행 모드를 지정하기 위해 use strict를 사용할 필요가 없습니다. 코드가 클래스나 모듈에 작성되어 있는 한, 엄격 모드만 사용할 수 있으므로 클래스의 this 함수는 정의되지 않은🎜이벤트 핸들러에서 화살표 함수 래핑🎜🎜단점: 추가 래핑이 필요합니다. 핸들러 함수 외부 보기 흉한 구조의 화살표 함수🎜🎜장점:🎜🎜앞서 언급한 것처럼 {this.handleClick( )}에서 처리 함수를 호출할 때 괄호를 추가하지 마세요. 그렇지 않으면 프로그램 내부 즉시 실행됩니다. 이제 외부에 화살표 함수 레이어를 래핑한 후 괄호를 추가할 수 있을 뿐만 아니라 나중에 사용할 매개변수를 전달할 수도 있습니다🎜rrreeebind() 메서드를 통해 함수의 this 지점을 변경하면 함수의 특성 솔루션이 실행되지 않습니다🎜rrreee클래스에서 이벤트 처리 함수를 선언할 때 화살표 함수를 직접 사용🎜rrreee🎜장점:🎜🎜코드가 간결하고 직관적이며 가장 많이 사용되는 방법🎜语法：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>
)
}
}（学习视频分享：编程基础视频）
위 내용은 반응에서 구성 요소 상태를 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
