1

Tenho minha sequinte pagina:

import React from 'react';
import {
  ScrollView,
  StyleSheet,
  Text,
  Button,
} from 'react-native';

export default class ArticlesScreen extends React.Component {

   constructor(props) {
     super(props);
     this.state = {
       teste: 'Teste'
     };
   }

  funcao () {
    this.state.teste = 'blabla';
  }

  render() {
    return (
      <ScrollView style={styles.container}>
        <Text>
        { this.state.teste }
        </Text>
        <Button
          onPress={ () => this.funcao()}
          title="Press Me"
          color="#841584"
        />
      </ScrollView>
    );
  }
}

Essa função irá mostrar na tela a palavra Teste seguida de um botão roxo. Quando eu clico no botão o valor da variavel teste é mudado para 'blabla' e eu sei disso porque mandei printar no console.

Mas na tela não está atualizando, O nome Teste ainda está aparecendo na tela e não está sendo subistituido por blabla. Como faço para atualizar este campo em especifico, sem precisar recarregar toda a pagina?

1 Resposta 1

4

Para alterar o estado no React é usado o setState que irá evoluir o estado atual para um novo estado, então no lugar de this.state.teste = 'blabla' deve-se usar this.setState({teste: 'blabla'}). Até esse ponto o seu código ficaria assim:

import React from 'react';
import {
  ScrollView,
  StyleSheet,
  Text,
  Button,
} from 'react-native';

export default class ArticlesScreen extends React.Component {

   constructor(props) {
     super(props);
     this.state = {
       teste: 'Teste'
     };
   }

  funcao () {
    this.setState({
        teste : 'blabla'
    });
  }

  render() {
    return (
      <ScrollView style={styles.container}>
        <Text>
        { this.state.teste }
        </Text>
        <Button
          onPress={ () => this.funcao()}
          title="Press Me"
          color="#841584"
        />
      </ScrollView>
    );
  }
}

Só que isso irá causar outro problema. Dentro da funcao o this não se referencia mais à classe atual, mas sim à quem fez a chamada da função, logo o this.setState irá acusar um erro, já que o botão não tem referência para setState. Nesse caso deve-se fazer um bind no construtor para dizer que o this dentro de funcao ainda irá fazer referência à classe. Segue o código com as alterações:

import React from 'react';
import {
  ScrollView,
  StyleSheet,
  Text,
  Button,
} from 'react-native';

export default class ArticlesScreen extends React.Component {

   constructor(props) {
     super(props);
     this.state = {
       teste: 'Teste'
     };
    this.funcao = this.funcao.bind(this)
   }

  funcao () {
    this.setState({
        teste : 'blabla'
    });
  }

  render() {
    return (
      <ScrollView style={styles.container}>
        <Text>
        { this.state.teste }
        </Text>
        <Button
          onPress={ () => this.funcao()}
          title="Press Me"
          color="#841584"
        />
      </ScrollView>
    );
  }
}

Com essas alterações seu objetivo será alcançado. Nesse link tem um exemplo funcional com React.

1
  • 1
    Eu fiz sem o bind, e não deu erro. Mas eu entendi a função do bind. 5/10/2018 às 12:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .