react-native setState
示例
要在应用程序中更改视图，可以使用setState-这将重新渲染您的组件及其任何子组件。setState在新状态和先前状态之间执行浅表合并，并触发组件的重新呈现。
setState接受键值对象或返回键值对象的函数
键值对象
this.setState({myKey: 'myValue'});功能
使用函数对于基于现有状态或道具更新值很有用。
this.setState((previousState, currentProps) => {
return {
myInteger: previousState.myInteger+1
}
})您还可以传递一个可选的回调函数setState，当组件以新状态重新渲染时将触发该回调函数。
this.setState({myKey: 'myValue'}, () => {
//组件已重新渲染...做一些了不起的事情！
));完整的例子
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, TouchableOpacity } from 'react-native';
export default class MyParentComponent extends Component {
constructor(props) {
super(props);
this.state= {
myInteger: 0
}
}
getRandomInteger() {
const randomInt = Math.floor(Math.random()*100);
this.setState({
myInteger: randomInt
});
}
incrementInteger() {
this.setState((previousState, currentProps) => {
return {
myInteger: previousState.myInteger+1
}
});
}
render() {
return <View style={styles.container}>
<Text>Parent Component Integer: {this.state.myInteger}</Text>
<MyChildComponent myInteger={this.state.myInteger} />
<Button label="Get Random Integer" onPress={this.getRandomInteger.bind(this)} />
<Button label="Increment Integer" onPress={this.incrementInteger.bind(this)} />
</View>
}
}
export default class MyChildComponent extends Component {
constructor(props) {
super(props);
}
render() {
// this will get updated when "MyParentComponent" state changes
return <View>
<Text>Child Component Integer: {this.props.myInteger}</Text>
</View>
}
}
export default class Button extends Component {
constructor(props) {
super(props);
}
render() {
return <TouchableOpacity onPress={this.props.onPress}>
<View style={styles.button}>
<Text style={styles.buttonText}>{this.props.label}</Text>
</View>
</TouchableOpacity>
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
button: {
backgroundColor: '#444',
padding: 10,
marginTop: 10
},
buttonText: {
color: '#fff'
}
});
AppRegistry.registerComponent('MyApp', () => MyParentComponent);