In React können Sie setState() verwenden, um den Status der Komponente zu ändern. setState() ist eine Methode zum Aktualisieren des Komponentenstatus. Diese Methode kann Änderungen am Komponentenstatus in die Warteschlange stellen und auch den neuesten Status abrufen. Die Syntax lautet „this.setState({Teil der zu ändernden Daten})“.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, React18-Version, Dell G3-Computer.
Definition:
wird verwendet, um die Form von Dingen zu einem bestimmten Zeitpunkt in 某一时刻的形态的数据 , 一般称为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()Daten
Zustand
bezeichnet. (Es kann einfach verstanden werden, dass Status Daten sind)🎜Zum Beispiel: die Buchbestandsmenge einer Person im Alter von 18 Jahren am 23. September. Es gibt auch verwandte Konzepte in vue🎜🎜🎜Eigenschaften:🎜🎜🎜 kann geändert werden, nach der Änderung hat die Ansicht entsprechende Änderungen (bidirektionale Datenbindung)🎜zustandslose Komponenten genannt🎜🎜🎜Hinweis:🎜🎜🎜Am 6. Februar 2019 wurden React Hooks in React Version 16.8 eingeführt, sodass auch funktionale Komponenten ihren eigenen Zustand definieren können. [Verwandte Empfehlungen: Redis-Video-Tutorial, Programmierunterricht】🎜🎜Dieser Artikel erklärt hauptsächlich den Status von 🎜Klassenkomponenten🎜🎜state = { zum Initialisieren🎜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>
)
}
}< Elementereignisname 1={Ereignisbehandlungsfunktion 1} Ereignisname 2={Ereignisbehandlungsfunktion 2} ></Element>🎜🎜🎜Hinweis🎜:🎜🎜React-Ereignisnamen verwenden die Benennung in Groß- und Kleinschreibung, z. B : 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( ) Zu diesem Zeitpunkt wird zuerst fn() aufgerufen und dann wird das Ausführungsergebnis von fn als Verarbeitung verwendet Funktion des Klickereignissesundefiniertclass Intern ist der Standardmodus der strikte Modus, daher ist es nicht erforderlich, use strict zu verwenden, um den Ausführungsmodus anzugeben. Solange Ihr Code in einer Klasse oder einem Modul geschrieben ist, ist nur der strikte Modus verfügbar, daher zeigt die Funktion this in der Klasse auf undefiniert🎜Eine Pfeilfunktion im Ereignishandler umschließen🎜🎜Nachteil: Zusätzliches Umschließen ist erforderlich Außerhalb der Handlerfunktion Eine Pfeilfunktion mit einer hässlichen Struktur🎜🎜Vorteile:🎜🎜Fügen Sie wie bereits erwähnt keine Klammern hinzu, wenn Sie die Verarbeitungsfunktion in {this.handleClick ( ) aufrufen, da sonst das Programm darin enthalten ist wird sofort ausgeführt Ok, jetzt, nachdem Sie eine Ebene der Pfeilfunktion nach außen eingeschlossen haben, können Sie nicht nur Klammern hinzufügen, sondern auch Parameter übergeben, die später verwendet werden🎜rrreeeDas Ändern dieses Punkts der Funktion über die Methode bind() führt nicht die charakteristische Lösung der Funktion aus🎜rrreeeVerwenden Sie Pfeilfunktionen direkt, wenn Sie Ereignisbehandlungsfunktionen in Klassen deklarieren🎜rrreee🎜Vorteile:🎜🎜Der Code ist prägnant, intuitiv und die am häufigsten verwendete Methode🎜语法：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>
)
}
}（学习视频分享：编程基础视频）
Das obige ist der detaillierte Inhalt vonSo ändern Sie den Komponentenstatus in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Ist Python Front-End oder Back-End?
So implementieren Sie Instant Messaging im Frontend
Der Unterschied zwischen Front-End und Back-End
Einführung in die Beziehung zwischen PHP und Frontend
Was ist der Baidu-Index?
So legen Sie den Offline-Status bei Douyin fest
Was ist der Zweck der Speicherverwaltung?
Tutorial zur Erstellung von Word-Dokumenttabellen
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
