在react中，可以利用setState()來修改元件的狀態。 setState()是用於更新元件狀態state的方法，該方法可以對元件state的變更排入佇列，也可取得最新的狀態，語法為「this.setState( { 要修改的部分資料 } )」。
本教學操作環境：Windows7系統、react18版、Dell G3電腦。
#定義：
是用來描述事物在某一時刻的形態的資料 , 一般稱為 state。 (可以簡單理解為狀態就是資料)
例如：9月23號時書的庫存數量；18歲時人的身高. vue中也有相關的概念
特點:
能被改變，改變了之後視圖會有對應的變化(雙向資料綁定)
#有狀態元件：能定義state的元件。 類別元件就是有狀態元件。
無狀態元件：不能定義state的元件。 函數元件又叫做無狀態元件
注意:
2019年02月06日，React 16.8版本中引入了React Hooks，從而函數式元件也能定義自己的狀態了。 【相關推薦：Redis影片教學、程式設計教學】
本文主要講解類別元件的狀態
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 } 事件名稱2={ 事件處理函數2 } ></元素>\
注意：
React 事件名稱採用駝峰命名法，例如：onMouseEnter、onFocus、 onClick ......
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指向問題
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>
)
}
}事件處理程序中的this指向的是undefined
3.解決事件函數this指向:
在事件處理程序外套一層箭頭函數
缺點：需要在處理函數外額外包裹一個箭頭函數, 結構不美觀
優點:
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>
)
}
}语法：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'
}
})setState进行修改。由state的值来控制表单元素的值示例代码:
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( { 要修改的部分数据 } )操作对应的状态即可
示例代码:
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怎麼改變組件狀態的詳細內容。更多資訊請關注PHP中文網其他相關文章！
