2.2 KiB
title | localeTitle |
---|---|
Component State | Estado Componente |
Estado Componente
Nos componentes de Class
, existe uma maneira de armazenar e gerenciar o estado incorporado ao Reagir Nativo.
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>
);
}
}
Estado é semelhante a adereços, mas é privado e totalmente controlado pelo componente. Aqui, o método constructor()
está chamando o construtor da classe pai com super();
- Component
é a classe pai do App
porque estamos usando a palavra-chave extends
. O método constructor()
também inicializa o objeto de estado do componente:
this.state = {
counter: 0
};
O estado pode ser exibido dentro do componente:
{this.state.counter}
Ou atualizado chamando:
this.setState({});
Nota: Além de sua criação inicial no método constructor()
seu componente, você nunca deve modificar diretamente o estado do componente com this.state =
. Você deve usar this.setState
como pode ser visto nas funções incrementCount
e decrementCount
acima.
A contagem é incrementada e decrementada chamando as funções passadas aos manipuladores do onPress
da mesma forma que seriam se você chamasse um manipulador de cliques do JavaScript na web.
ASIDE: No primeiro exemplo, <Button>
é um componente personalizado; é uma combinação de <TouchableOpacity>
e <Text>
da API React Native:
const Button = ({ onPress, children, buttonProps, textProps }) => {
const { buttonStyle, textStyle } = styles;
return (
<TouchableOpacity onPress={onPress} style={[buttonStyle, buttonProps]}>
<Text style={[textStyle, textProps]}>
{children}
</Text>
</TouchableOpacity>
);
};