資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究React Native 中的狀態是什麼？
狀態是資料來源的地方。我們應該始終儘量使我們的狀態儘可能簡單，並最大程度地減少有狀態元件的數量。例如，如果我們有十個元件需要來自狀態的資料，我們應該建立一個容器元件來為所有這些元件保留狀態。
示例 1
使用者按下按鈕時，按鈕標題更改為 ON/OFF。
狀態在建構函式內部初始化，如下所示：
constructor(props) {
super(props);
this.state = { isToggle: true };
}isToggle 是賦予狀態的布林值。按鈕的標題根據 isToggle 屬性決定。如果值為 true，則按鈕的標題為 ON，否則為 OFF。
按下按鈕時，會呼叫 onpress 方法，該方法會呼叫 setState，如以下所示更新 isToggle 值：
onPress={() => {
this.setState({ isToggle: !this.state.isToggle });
}}當用戶點選按鈕時，將呼叫 onPress 事件，setState 將更改 isToggle 屬性的狀態。
App.js
import React, { Component } from "react";
import { Text, View, Button, Alert } from 'react-native';
class App extends Component {
constructor(props) {
super(props);
this.state = { isToggle: true };
}
render(props) {
return (
<View style={{flex :1, justifyContent: 'center', margin: 15 }}>
<Button
onPress={() => {
this.setState({ isToggle: !this.state.isToggle });
}}
title={
this.state.isToggle ? 'ON' : "OFF"
}
color="green"
/>
</View>
);
}
}
export default App;輸出
當用戶按下按鈕時，按鈕將切換。
示例 2
使用者點選文字時更改文字。
在下面的示例中，狀態在建構函式內部顯示如下：
constructor(props) {
super(props);
this.state = { myState: 'Welcome to Tutorialspoint' };
}狀態 myState 在 Text 元件內部顯示如下：
<Text onPress={this.changeState} style={{color:'red', fontSize:25}}>{this.state.myState} </Text>當用戶觸控或按下文字時，會觸發 onPress 事件並呼叫方法 this.changeState，該方法透過更新狀態 myState 來更改文字，如下所示：
changeState = () => this.setState({myState: 'Hello World'})import React, { Component } from "react";
import { Text, View, Button, Alert } from 'react-native';
class App extends Component {
constructor(props) {
super(props);
this.state = { myState: 'Welcome to Tutorialspoint' };
}
changeState = () => this.setState({myState: 'Hello World'})
render(props) {
return (
<View style={{flex :1, justifyContent: 'center', margin: 15 }}>
<View>
<Text onPress={this.changeState} style={{color:'red', fontSize:25}}> {this.state.myState} </Text>
</View>
</View>
);
}
}
export default App;輸出
更新於: 2021年7月1日
2K+ 閱讀量
廣告