 |
|
||||
Você está aqui: React ::: Dicas & Truques ::: Gerenciamento de Estado |
Como atualizar o estado de um componente em React usando a função setState() - Abordagem usando componentes em classesQuantidade de visualizações: 560 vezes |
|
Nesta dica mostrarei como podemos atualizar o estado de componentes em React usando a função setState(). Neste exemplo que abordo a criação de componentes usando class. Em outras dicas eu abordo a realização desta tarefa usando componentes criados usando funções (componentes funcionais). Veja que no construtor da classe App nós já acessamos o estado da classe e definimos o valor 0 para a variável contador. Em seguida temos um função chamada incrementar() que incrementa o valor do contador. Para finalizar nós chamamos a função incrementar() a partir do clique de um botão. Veja o código completo para a classe App.js:
// faz os imports necessários
import React, {Component} from 'react';
// definição da classe App
class App extends Component{
// construtor da classe
constructor(){
// chama o construtor da super classe
super()
// define o estado inicial da variável
// contador
this.state={
contador: 0
}
}
// função que permite incrementar o contador
incrementar(){
// aumenta o valor do contador
var valor = this.state.contador + 1
// atualiza o estado
this.setState({
contador: valor
})
}
// renderiza o elemento HTML
render(){
return(
<div>
<h1>Contador: {this.state.contador}</h1>
<button onClick={() => this.incrementar()}>
Aumentar Contador</button>
</div>
);
}
}
// exporta essa classe
export default App;
E agora o código para o arquivo index.js:
// faz os imports necessários
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
// criamos a raiz da aplicação React
const root = document.getElementById("root");
// e renderizamos o elementos principal
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
root
);
E, finalmente, aqui está o arquivo index.html no qual a aplicação React é carregada:
<!DOCTYPE html>
<html>
<head>
<title>Estudos React</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
|
 Link para compartilhar na Internet ou com seus amigos: |
Veja mais Dicas e truques de React |
Dicas e truques de outras linguagens |
|
Java - Como criar um Jogo da Velha em Java - Jogo completo com código fonte comentado - Versão console VB.NET - Como usar o laço While em VB.NET Java - Java Swing para iniciantes - Como detectar eventos do teclado em uma janela JFrame do Java Swing |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
