Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

onChange do React não chama a função

Estou fazendo o exercíco do curso React: Entendendo como a biblioteca funciona, mas quando começo a digitar algo o onChange deveria chamar a handleMudancaTitulo, mas ele não está fazendo nada (não aparece nada no meu console). O que poderia ser?

import React, { Component } from "react"; import "./estilo.css";

class FormularioCadastro extends Component {

constructor(){
    super();
    this.titulo = "";
}

handleMudancaTitulo(evento){
    console.log("oi");
    this.titulo = evento.target.value;
    console.log(titulo);
}
render() {
    return (
        <form className="form-cadastro">
            <input
                type="text"
                placeholder="Título"
                className="form-cadastro_input"
                onChange={this.handleMudancaTitulo}
            />
            <textarea
                rows={15}
                placeholder="Escreva sua nota..."
                className="form-cadastro_input"
            />
            <button className="form-cadastro_input form-cadastro_submit">
                Criar Nota
            </button>
        </form>
    );
}

}

export default FormularioCadastro;

7 respostas

Boa noite Doglas tudo bem?

Aparentemente está correto seu código, no console ele aparece algum erro ou não aparece nada?

A única coisa que precisa corrigir aí é que para mudar o valor do estado titulo deve usar setState desta forma:

this.setState({
        titulo: evento.target.value
});

No inpu também precisa colocar o value para receber o valor de titulo.

value={this.titulo}

Boa noite Marcos, tudo bem e você?

Obrigado pela resposta. No console aparece essa mensagem: "[HMR] Waiting for update signal from WDS...". Eu descobri que se comentar um if do log.js ele não aparece mais essa mensagem. Fora isso não aparece mais nada no console, nem o "oi". O que me parece é que por alguma razão ele não tá chamando a handleMudancaTitulo. Alguma idéia do que poderia ser?

Tudo jóia também.

Faz o seguinte dentro do construtor colocar este código:

this.handleMudancaTitulo = this.handleMudancaTitulo.bind(this)

não tenho certeza se vai funcionar, mas isto vai fazer com que o escopo da função seja o escopo da classe.

Não funcionou, acho que vou assistir a aula denovo pra ver se esqueci de algo. Obrigado pela ajuda e sugestões Marcos.

Doglas,

Coloque a declaração da função desta forma pra ver se funciona:

function handleMudancaTitulo(evento){
    console.log("oi");
    this.titulo = evento.target.value;
    console.log(titulo);
}

Marcos,

Também não funcionou. Quando coloco dessa forma o Visual Studio Code informa o seguinte erro: "Unexpected token. A constructor, method, accessor, or property was expected."

solução!

Marcos,

Ao assistir a aula novamente e analisar os arquivos disponibilizados pelo instrutor, descobri que havia esqucido de inserir parte dos arquivos que ele disponibilizou e que não foram trabalhados na aula. Agora funcionou corretamente, obrigado pela ajuda.