2.0 KiB
2.0 KiB
title | localeTitle |
---|---|
Component State | 组件状态 |
组件状态
在Class
组件中,有一种方法可以存储和管理React Native内置的状态。
class App extends Component {
constructor () {
super();
this.state = {
counter: 0
};
}
incrementCount () {
this.setState({
counter: this.state.counter + 1
});
}
decrementCount () {
this.setState({
counter: this.state.counter - 1
});
}
render () {
return (
<View>
<Text>Count: {this.state.counter}</Text>
<Button onPress={this.decrementCount.bind(this)}>-</Button>
<Button onPress={this.incrementCount.bind(this)}>+</Button>
</View>
);
}
}
State类似于props,但它是私有的并且完全由组件控制。这里, constructor()
方法用super();
调用父类的构造函数super();
- **Component
**是App
的父类,因为我们使用的是extends
关键字。 constructor()
方法还初始化组件的状态对象:
this.state = {
counter: 0
};
状态可以显示在组件中:
{this.state.counter}
或通过致电更新:
this.setState({});
**注意:**除了在组件的constructor()
方法中初始创建之外,您不应该使用this.state =
直接修改组件的状态。您必须使用this.setState
,可以在上面的incrementCount
和decrementCount
函数中看到。
通过调用传递给onPress
处理程序的函数来增加和减少计数,就像在Web上调用JavaScript中的单击处理程序一样。
ASIDE:在第一个例子中, <Button>
是一个自定义组件;它是来自React Native API的<TouchableOpacity>
和<Text>
的组合:
const Button = ({ onPress, children, buttonProps, textProps }) => {
const { buttonStyle, textStyle } = styles;
return (
<TouchableOpacity onPress={onPress} style={[buttonStyle, buttonProps]}>
<Text style={[textStyle, textProps]}>
{children}
</Text>
</TouchableOpacity>
);
};