2.2 KiB
| title |
|---|
| Component State |
Component State
In Class components, there is a way to store and manage state built in to 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 is similar to props, but it is private and fully controlled by the component. Here, the constructor() method is calling the parent class' constructor with super(); - Component is the parent class of App because we are using the extends keyword. The constructor() method also initializes the component's state object:
this.state = {
counter: 0,
};
The state can be displayed within the component:
{
this.state.counter;
}
Or updated by calling:
this.setState({});
Note: Aside from its initial creation in your component's constructor() method, you should never directly modify the component's state with this.state =. You must use this.setState, as shown in the incrementCount and decrementCount functions above.
The count is incremented and decremented by calling the functions passed to the onPress handlers, just like they would if you called a click handler from JavaScript on the web.
ASIDE: In the first example, <Button> is a custom component; it's a combination of <TouchableOpacity> and <Text> from the React Native API:
const Button = ({ onPress, children, buttonProps, textProps }) => {
const { buttonStyle, textStyle } = styles;
return (
<TouchableOpacity onPress={onPress} style={[buttonStyle, buttonProps]}>
<Text style={[textStyle, textProps]}>{children}</Text>
</TouchableOpacity>
);
};