React Native 的 this.setState 同微信小程序的 this.setData 很类似,但是呢,写法却不一样,注意别混淆了
最简单的写法 —— 写法六
同小程序一致的写法 —— 写法五
setState 函数是异步执行的函数
写法一
import React, {Component} from 'react';
import {
Platform,
StyleSheet,
View,
Text,
TextInput,
PixelRatio,
} from 'react-native';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
inputedNum: '',//写法1
};
}
updateNum(newText) {//写法1
this.setState((state) => {
return {
inputedNum: newText
};
});
}
render() {
return (
<View style={styles.container}>
{/*写法1*/}
<TextInput placeholder={'请输入账号'} onChangeText={(newText) => this.updateNum(newText)}/>
<Text>您输入的手机号:{this.state.inputedNum}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
}
});
写法二
import React, {Component} from 'react';
import {
Platform,
StyleSheet,
View,
Text,
TextInput,
PixelRatio,
} from 'react-native';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
inputedPW: ''//写法2
};
this.updatePW = this.updatePW.bind(this);//写法2
}
updatePW(newText) {//写法2
this.setState(() => {
return {
inputedPW: newText
};
});
}
render() {
return (
<View style={styles.container}>
{/*写法2*/}
<TextInput placeholder={'请输入密码'} secureTextEntry={true} onChangeText={this.updatePW}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
}
});
上述2种写法,请根据 写法1 或 写法2 的几处注意点,查看写法
setState 函数的原型
setState(oldState, callback)
如下例
updateNum(newText) {
this.setState((oldState) => {
//可以查看下oldState有哪些值
for (let index in oldState) {
console.log("index = ", index);
console.log("value = ", oldState[index]);
}
return {
inputedNum: newText,
addedParam: 'I\'m a new added variable'
}
}, this.changeNumDone);
}
//自定义回调
changeNumDone() {
console.log('React Native has changed inputed Num,and has added a new variable');
}
注意到上例中的 addedParam 了么
return {
inputedNum: newText,
addedParam: 'I\'m a new added variable'
}
这样动态的新增 state 变量,而不必在 this.state 里初始化,React Native 允许这种写法,但个人建议,最好把用到的变量提到 this.state 中,方便维护该组建中用到的变量管理,免得在维护时需要修改,漏掉某些变量
写法三
import React, {Component} from 'react';
import {
Platform,
StyleSheet,
View,
Text,
TextInput,
PixelRatio,
} from 'react-native';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
inputedNum: '',//写法3
};
}
updateNum(inputedNum) {//写法3
this.setState(() => {
return {inputedNum};
});
}
render() {
return (
<View style={styles.container}>
{/*写法3*/}
<TextInput placeholder={'请输入账号'} onChangeText={(newText) => this.updateNum(newText)}/>
<Text>您输入的手机号:{this.state.inputedNum}</Text>
<Text>您输入的手机号的长度:{this.state.inputedNum.length}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
}
});
写法四
import React, {Component} from 'react';
import {
Platform,
StyleSheet,
View,
Text,
TextInput,
PixelRatio,
} from 'react-native';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
inputedNum: '',//写法4
};
}
updateNum(inputedNum) {//写法4
this.setState({inputedNum});
}
render() {
return (
<View style={styles.container}>
{/*写法4*/}
<TextInput placeholder={'请输入账号'} onChangeText={(newText) => this.updateNum(newText)}/>
<Text>您输入的手机号:{this.state.inputedNum}</Text>
<Text>您输入的手机号的长度:{this.state.inputedNum.length}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
}
});
写法五(这个写法同微信小程序一致)
import React, {Component} from 'react';
import {
Platform,
StyleSheet,
View,
Text,
TextInput,
PixelRatio,
} from 'react-native';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
inputedNum: '',//写法4
};
}
updateNum(inputedNum) {//写法4
this.setState({
inputedNum: inputedNum
});
}
render() {
return (
<View style={styles.container}>
{/*写法4*/}
<TextInput placeholder={'请输入账号'} onChangeText={(newText) => this.updateNum(newText)}/>
<Text>您输入的手机号:{this.state.inputedNum}</Text>
<Text>您输入的手机号的长度:{this.state.inputedNum.length}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
}
});
写法六
import React, {Component} from 'react';
import {
Platform,
StyleSheet,
View,
Text,
TextInput,
PixelRatio,
} from 'react-native';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
inputedNum: '',//写法5
};
}
render() {
return (
<View style={styles.container}>
{/*写法5*/}
<TextInput placeholder={'请输入账号'} onChangeText={(inputedNum) => this.setState({inputedNum})}/>
<Text>您输入的手机号:{this.state.inputedNum}</Text>
<Text>您输入的手机号的长度:{this.state.inputedNum.length}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
}
});