Bagaimana untuk menukar keadaan komponen dalam tindak balas

Sebagai tindak balas, anda boleh menggunakan setState() untuk mengubah suai keadaan komponen. setState() ialah kaedah yang digunakan untuk mengemas kini keadaan komponen Kaedah ini boleh membuat baris gilir perubahan kepada keadaan komponen, dan juga boleh mendapatkan keadaan terkini Sintaksnya ialah "this.setState({sebahagian daripada data yang akan diubah suai })".

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi react18, komputer Dell G3.

1. Komponen stateful dan stateless

---

1. Mula-mula faham apa itu:

Definisi:

digunakan untuk menerangkan 某一时刻的形态data perkara dalam , biasanya dipanggil keadaan. (Ia boleh difahami dengan mudah bahawa keadaan adalah data)
Contohnya: kuantiti inventori buku pada 23 September; >

Ciri:

boleh ditukar Selepas perubahan, paparan akan mempunyai perubahan yang sepadan (pengikatan data dua hala)

2 komponen stateless

Stateful component: komponen yang boleh mentakrifkan state.

Komponen kelas

ialah komponen stateful. Komponen tanpa status: komponen yang tidak boleh menentukan keadaan.

Komponen fungsi

juga dipanggil 无状态组件

Nota:

Pada 6 Februari 2019, React Hooks telah diperkenalkan dalam React 16.8, oleh itu Berfungsi komponen juga boleh menentukan keadaan mereka sendiri. [Cadangan berkaitan:

Tutorial video Redis

, Pengajaran pengaturcaraan]Artikel ini menerangkan terutamanya status

komponen kelas

3. Status komponen kelas

1) Tentukan status

Gunakan

untuk memulakan

state = { }

import React from "react";

export default class Hello extends React.Component {

  // 这里的state就是状态
  state = {
    list:  [{ id: 1, name: "给我一个div" }],
    isLoading : true
  };
}

2) Gunakan

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

dalam paparan 2. Pengikatan acara

---

1. Format

>

6a0c90f0d644f9cc41c34c5db4ca90650adaba3e89c641156828c5bef7bd8846

Nota

: Nama acara bertindak balas menggunakan penamaan kotak unta, seperti: onMouseEnter, onFocus, onClick... .

Contoh

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

Nota

:

Nama acara ialah Format penamaan kes Unta kecil
Kaedah tambahan dalam kelas
ini fn
• Jangan

  tambah kurungan:

  Pada masa ini, fn() akan dipanggil dahulu, dan kemudian hasil pelaksanaan fn akan digunakan sebagai fungsi pemprosesan acara klik
  • onClick={ this.fn( ) }
Jangan lupa tulis ini

3 Pemprosesan acara-ini menunjukkan masalah

---

1 :

Hasilnya ialah ini:

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

Ini dalam kaedah render menunjuk kepada komponen tindak balas semasa.

• ini dalam pengendali acara menunjuk kepada
• undefined

2. Sebab:

kelas dan modul Secara dalaman, lalai ialah mod ketat, jadi tidak perlu menggunakan

untuk menentukan mod berjalan. Selagi kod anda ditulis dalam kelas atau modul, hanya mod ketat yang tersedia, jadi fungsi ini dalam kelas menghala ke tidak ditentukanclassuse strict

3. Selesaikan fungsi acara ini menunjukkan kepada:

Kaedah 1:

在事件处理程序外套一层箭头函数Kelemahan: Perlu membalut fungsi anak panah tambahan di luar fungsi pemprosesan, struktur tidak cantik

Kelebihan :

Seperti yang dinyatakan sebelum ini, jangan tambah kurungan apabila memanggil fungsi pemprosesan dalam

, jika tidak, atur cara di dalam akan dilaksanakan serta-merta. Sekarang selepas membungkus lapisan fungsi anak panah di luar, anda bukan sahaja boleh menambah kurungan Tanda kurung juga boleh digunakan untuk menghantar parameter

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

akan digunakan kemudian >

Kaedah 3:

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

Kelebihan:

Kodnya ringkas, intuitif dan kaedah yang paling banyak digunakan在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>
    )
  }
}

4 Ubah suai status komponen

Nota:

tidak boleh diubah suai secara langsung Nilai dalam keadaan mengubah paparan ! keadaan komponen; setState() akan menukar keadaan komponen Berbaris dan memberitahu React bahawa komponen ini dan anak-anaknya perlu diberikan semula dengan keadaan dikemas kini.

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

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

Atas ialah kandungan terperinci Bagaimana untuk menukar keadaan komponen dalam tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!