這篇文章主要介紹“react如何改變組件狀態(tài)”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“react如何改變組件狀態(tài)”文章能幫助大家解決問題。

東寶網站建設公司成都創(chuàng)新互聯(lián)公司,東寶網站設計制作，有大型網站制作公司豐富經驗。已為東寶成百上千提供企業(yè)網站建設服務。企業(yè)網站搭建\外貿網站建設要多少錢，請找那個售后服務好的東寶做網站的公司定做！

在react中，可以利用setState()來修改組件的狀態(tài)。setState()是用于更新組件狀態(tài)state的方法，該方法可以對組件state的更改排入隊列，也可獲取最新的狀態(tài)，語法為“this.setState( { 要修改的部分數據 } )”。

一、有狀態(tài)組件和無狀態(tài)組件

1.先理解一下什么是狀態(tài):

定義：

是用來描述事物在某一時刻的形態(tài)的數據,  一般稱為state。(可以簡單理解為狀態(tài)就是數據)
例如：9月23號時書的庫存數量； 18歲時人的身高. vue中也有相關的概念

特點:

能被改變，改變了之后視圖會有對應的變化 (雙向數據綁定)

2.有狀態(tài)組件和無狀態(tài)組件

有狀態(tài)組件：能定義state的組件。類組件就是有狀態(tài)組件。

無狀態(tài)組件：不能定義state的組件。函數組件又叫做無狀態(tài)組件

注意:

2019年02月06日，React 16.8版本中引入了 React Hooks，從而函數式組件也能定義自己的狀態(tài)了。【相關推薦：redis視頻教程、編程教學】

本文主要講解類組件的狀態(tài)

3.類組件的狀態(tài)

1）定義狀態(tài)

使用 state = { } 來做初始化

import React from "react";

export default class Hello extends React.Component {

  // 這里的state就是狀態(tài)
  state = {
    list:  [{ id: 1, name: "給我一個div" }],
    isLoading : true
  };
}

2）在視圖中使用

 render() {
    return (
      <>
            
姓名-{this.state.name}
            

            {this.state.list.map((item) => (
            {item.name}
             ))}
            
        
{this.state.isLoading ? "正在加載" : "加載完成"}
      
    );
  }

二、事件綁定

1.格式

<元素 事件名1={ 事件處理函數1 }  事件名2={ 事件處理函數2 }  >\

注意：

React 事件名采用駝峰命名法，比如：onMouseEnter、onFocus、 onClick ......

2.示例

import React from 'react'
import ReactDOM from 'react-dom'

const title = 
react中的事件


export default class Hello extends React.Component {
  fn() {
    console.log('mouseEnter事件')
  }
  render() {
    return (
      
 console.log('click事件') }
            onMouseEnte r = { this.fn }
      
    )
  }
}

const content = (
  

    {title}
    {}
  
)

ReactDOM.render ( content , document.getElementById ('root') )

注意事項：

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

• 在類中補充方法

• this . fn不要加括號：

• onClick={ this.fn( ) } 此時會先調用fn()，然后將fn的執(zhí)行結果當做click事件的處理函數

別忘記了寫this

三、事件處理-this指向問題

1.問題代碼:

class App extends React.Component {
        // 組件狀態(tài)
      state = {
        msg: 'hello react'
      }
      
      // 事件處理函數
      handleClick() {
            console.log(this) // 這里的this是 undefined
      }
      
      render() {
            console.log(this) // 這里的this是當前的組件實例 App
        
          return (
              

                    點我
              
        )
      }
}

結果是這樣:

• render方法中的this指向的是當前react組件。

• 事件處理程序中的this指向的是undefined

2.原因:

class類和模塊的內部，默認就是嚴格模式，所以不需要使用use strict指定運行模式。只要你的代碼寫在類或模塊之中，就只有嚴格模式可用,所以類中的函數this指向了undefined

3.解決事件函數this指向:

方式1:

在事件處理程序外套一層箭頭函數

缺點：需要在處理函數外額外包裹一個箭頭函數, 結構不美觀

優(yōu)點:

前面講過在 {this.handleClick ( )}這里面調用處理函數的時候不要加小括號,不然里面的程序會立即執(zhí)行掉,現在在外面包裹一層箭頭函數之后,不僅可以加上小括號,還能實現傳參,后面會用到

class App extends React.Component {
  state = {
    msg: 'hello react'
  }

  handleClick () {
    console.log(this.state.msg)
  }

  render () {
    return (
      

         { this.handleClick ( ) }}>點我
      
    )
  }
}

方式2：使用bind

通過bind()方法改變函數this指向并不執(zhí)行該函數的特性解決

class App extends React.Component {
  state = {
    msg: 'hello react'
  }

  handleClick () {
    console.log(this.state.msg)
  }

  render () {
    return (
      

        點我
      
    )
  }
}

方式3：

在class中聲明事件處理函數的時候直接使用箭頭函數

class App extends React.Component {
  state = {
    msg: 'hello react'
  }

  handleClick = () => {
    console.log(this.state.msg)
  }
  render() {
    return (
      

        點我
      
    )
  }
}

優(yōu)點:

代碼簡潔,直觀,使用最多的一種方式

四、修改組件的狀態(tài)

注意:

不能通過直接修改state中的值來讓視圖變化 ! ! !
通過this.setState()方法修改

在react中，setstate是用于更新組件狀態(tài)state的方法；setState()將對組件state的更改排入隊列，并通知React需要使用更新后的state重新渲染此組件及其子組件。

1.語法:

語法：this.setState( { 要修改的部分數據 } )
這是繼承自React.Component的修改類組件狀態(tài)的方法

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'
  
  // 【推薦】不是直接修改當前值，而是創(chuàng)建新值的操作：
  this.setState({
    count: this.state.count + 1,
    list: [...this.state.list, 4],
    person: {
      ...this.state.person,
    	// 要修改的屬性，會覆蓋原來的屬性，這樣，就可以達到修改對象中屬性的目的了  
      name: 'rose'
    }
  })

五、表單處理-受控組件

• HTML中表單元素是可輸入的，即表單維護著自己的可變狀態(tài)（value）。

• 但是在react中，可變狀態(tài)通常是保存在state中的，并且要求狀態(tài)只能通過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 (
      

        
      
    )
  }
}

注意事項：

使用受控組件的方式處理表單元素后，狀態(tài)的值就是表單元素的值。即：想要操作表單元素的值，只需要通過this.setState( { 要修改的部分數據 } )操作對應的狀態(tài)即可

六、表單處理-非受控組件-ref

• 受控組件是通過 React 組件的狀態(tài)來控制表單元素的值

• 非受控組件是通過手動操作 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 (
      

        
        獲取文本框的值
      
    )
  }
}

關于“react如何改變組件狀態(tài)”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識，可以關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。