react怎麼改變元件狀態

在react中，可以利用setState()來修改元件的狀態。setState()是用於更新元件狀態state的方法，該方法可以對元件state的更改排入佇列，也可獲取最新的狀態，語法為「this.setState( { 要修改的部分資料 } )」。

前端（vue）入門到精通課程，老師線上輔導：聯絡老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

本教學操作環境：Windows7系統、react18版、Dell G3電腦。

一、有狀態元件和無狀態元件

1.先理解一下什麼是狀態:

定義：

是用來描述事物在某一時刻的形態的資料 , 一般稱為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('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

三、事件處理-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()方法修改

在react中，setstate是用於更新元件狀態state的方法；setState()將對元件state的更改排入佇列，並通知React需要使用更新後的state重新渲染此元件及其子元件。

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>
    )
  }
}
登入後複製

（學習視訊分享：）

以上就是react怎麼改變元件狀態的詳細內容，更多請關注TW511.COM其它相關文章！