Quando formulário reseta value do select não volta para 'Sem categoria' | React: ciclo de vida dos componentes

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

Referente ao curso React: ciclo de vida dos componentes, no capítulo Seguindo padrões e atividade Adicionando categorias aos cards

por Tiago Ribeiro Ramos

| 65.5k xp | 8 posts

a opção select do meu formulário está assim:

<select
          onChange={this._handleMudancaCategoria.bind(this)}
          className="form-cadastro_input"
        >
          <option>Sem categoria</option>
          {this.props.categorias.map((categoria, index) => {
            return <option key={index}>{categoria}</option>;
          })}
</select>

com o _handleMudancaCategoria:

  _handleMudancaCategoria(evento) {
    evento.stopPropagation();
    this.categoria = evento.target.value;
  }

e quando eu crio uma nova nota, eu chamo evento.target.reset() para limpar os dados do meu formulário

  _criarNota(evento) {
    evento.preventDefault();
    evento.stopPropagation();

    this.props.criarNota(this.titulo, this.texto, this.categoria);
    evento.target.reset();
  }

Estava funcionando bem até essa última aula. Quando criar nota é executado, o formulário é resetado, o valor do select volta para "Sem categoria", mas ao criar uma nova nota, o valor da categoria na nota é referente ao último valor selecionado e não ao valor atual (fiz upload de um exemplo no youtube, como podem ver: https://youtu.be/4MYhiub_16A ). Como posso fazer para que, ao resetar o formulário, o valor do select seja "Sem categoria"?

O que eu já testei e não funcionou:

adicionar onReset={this._handleMudancaCategoria.bind(this)} no select
adicionar onSubmit={this._handleMudancaCategoria.bind(this)} no select

2 respostas

solução!

por Antônio Evaldo

| 416.1k xp | 636 posts

Alura Scuba Team Intrutor e Desenvolvedor de Software

27/09/2021

Olá, Tiago, tudo bem?

Primeiramente, muito bacana que você tenha upado um vídeo para que possamos ver o problema, isso nos ajuda bastante :)

O problema é que você está tentando chamar o método no select, mas os eventos onReset e onSubmit são disparados pelo formulário. Apesar disso, não podemos simplesmente chamar _handleMudancaCategoria pelo formulário, pois este método é próprio para ser chamado pelo onChange do select, e o evento.target dentro desse método se referiria ao elemento errado (se referiria ao form em vez do select).

Além disso, eu percebi que o problema demonstrado no vídeo não acontece apenas com a categoria, mas com os três campos do formulário! Ou seja, digamos que você adicione uma nota, e assim a interface do formulário é resetada. Se imediatamente depois você clicar em "Criar Nota" novamente, será criada a mesma nota novamente.

Basicamente, precisamos resetar as propriedades titulo, texto e categoria do formulário quando sua interface for resetada! Uma forma de fazer isso é criando um handler para o reset do form:

  _handleResetForm(evento) {
    this.titulo = "";
    this.texto = "";
    this.categoria = "Sem Categoria";
  }

E chamamos _handleResetForm no onReset do formulário:

      <form
        className="form-cadastro"
        onSubmit={this._criarNota.bind(this)}
        onReset={this._handleResetForm.bind(this)}  // adicionando função handler para reset do form
      >

Eu escrevi explicitamente para quais valores o formulário deveria ser resetado, porque no final das contas não é apropriado chamar as funções handlers dos campos do formulário, pois elas dependem do elemento que as chama. Ou seja, é apropriado que apenas os próprios campos chamem essas funções.

Espero ter ajudado! Abraços e bons estudos :)

por Tiago Ribeiro Ramos

| 65.5k xp | 8 posts

27/09/2021

Valeu demais Antônio! Muito clara sua explicação. Até já testei aqui e rodou direitinho!