react怎麼改變組件狀態-前端問答-PHP中文網

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

react怎麼改變組件狀態

本教學操作環境：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 ( <> 姓名-{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的執行結果當做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 (   
 ) } }

登入後複製

結果是這樣:

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

登入後複製

方式2：使用bind

透過bind()方法改變函數this指向並不執行該函數的特性解決

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

登入後複製

###優點:######程式碼簡潔,直觀,使用最多的一種方式## #######四、修改元件的狀態#########################注意:#########不能通過直接修改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 (   
 ) } }

登入後複製

注意事项：

使用受控组件的方式处理表单元素后，状态的值就是表单元素的值。即：想要操作表单元素的值，只需要通过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 (    
 ) } }

登入後複製

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

以上是react怎麼改變組件狀態的詳細內容。更多資訊請關注PHP中文網其他相關文章！