So ändern Sie den Komponentenstatus in React

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.

1. Zustandsbehaftete Komponenten und zustandslose Komponenten

---

1. Verstehen Sie zunächst, was Zustand ist:

Definition:

wird verwendet, um die Form von Dingen zu einem bestimmten Zeitpunkt in 某一时刻的形态的数据 ,  一般称为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(&#39;mouseEnter事件&#39;)
  }
  render() {
    return (
      <div
            onClick = { () => console.log(&#39;click事件&#39;) }
            onMouseEnte r = { this.fn }
      </div>
    )
  }
}

const content = (
  <div>
    {title}
    {<Hello />}
  </div>
)

ReactDOM.render ( content , document.getElementById (&#39;root&#39;) )

注意事项：

• 事件名是小驼峰命名格式

• 在类中补充方法

• 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指向的是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 (
      <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()Daten

von /code> werden im Allgemeinen als

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)🎜

🎜2. Zustandsbehaftete Komponenten und zustandslose Komponenten🎜🎜🎜Zustandsbehaftete Komponenten: Komponenten, die es können Zustand definieren. 🎜Klassenkomponenten🎜 sind zustandsbehaftete Komponenten. 🎜🎜Zustandslose Komponenten: Komponenten, die keinen Zustand definieren können. 🎜Funktionale Komponenten🎜auch 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🎜🎜

🎜3. Der Status der Klassenkomponenten🎜🎜🎜🎜1) Definieren Sie den Status🎜🎜🎜Verwenden Sie 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'
    }
  })

🎜🎜2) Verwenden Sie 🎜🎜

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>
    )
  }
}

< in der Ansicht h2 data-id="heading-6">🎜2. Ereignisbindung🎜🎜🎜

🎜1 Format🎜🎜

🎜< Elementereignisname 1={Ereignisbehandlungsfunktion 1} Ereignisname 2={Ereignisbehandlungsfunktion 2} ></Element>🎜🎜🎜Hinweis🎜:🎜🎜React-Ereignisnamen verwenden die Benennung in Groß- und Kleinschreibung, z. B : onMouseEnter , onFocus, onClick...🎜

🎜2. Beispiel🎜

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>
    )
  }
}

🎜🎜Notizen🎜:🎜

• 🎜Der Ereignisname hat das Kamel-Case-Namensformat🎜
• 🎜Ergänzen Sie die Methode in der Klasse🎜
• 🎜dieses. fn🎜Nicht🎜hinzufügen Klammern:🎜< ul>
• onClick={ this.fn( ) Zu diesem Zeitpunkt wird zuerst fn() aufgerufen und dann wird das Ausführungsergebnis von fn als Verarbeitung verwendet Funktion des Klickereignisses

🎜Vergessen Sie nicht, dies zu schreiben🎜

🎜3 zum Problem🎜🎜🎜

🎜1. Fragecode:🎜🎜🎜rrreee🎜Das Ergebnis ist dieses:🎜

• Dies zeigt in der Render-Methode auf den Strom Reaktionskomponente.
• Dies im Event-Handler zeigt auf undefiniert

🎜2 class 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🎜

🎜3. Lösen Sie die Ereignisfunktion this verweist auf:🎜 🎜

🎜Methode 1:🎜

🎜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🎜rrreee

🎜Methode 2 : Verwenden Sie bind🎜

🎜Das Ändern dieses Punkts der Funktion über die Methode bind() führt nicht die charakteristische Lösung der Funktion aus🎜rrreee

🎜Methode 3: 🎜🎜Verwenden Sie Pfeilfunktionen direkt, wenn Sie Ereignisbehandlungsfunktionen in Klassen deklarieren🎜rrreee🎜Vorteile:🎜🎜Der Code ist prägnant, intuitiv und die am häufigsten verwendete Methode🎜

🎜4. Ändern Sie den Status der Komponente🎜🎜🎜🎜🎜🎜🎜🎜Hinweis: 🎜🎜🎜Sie können die Ansicht nicht ändern, indem Sie den Wert im Status ändern! code>this.setState()< /code>Methodenänderung🎜🎜In React ist setstate die Methode, die zum Aktualisieren des Komponentenstatus verwendet wird; setState() stellt Änderungen am Komponentenstatus in die Warteschlange und benachrichtigt React, dass diese Komponente erneut gerendert werden muss und seine Komponenten unter Verwendung des aktualisierten Zustands. 🎜

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>
    )
  }
}

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

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!