Boa tarde!
Informação importante: Já finalizei o curso e o projeto está funcional.
Problema principal:
Estou tentando fazer com o que o formulário tenha os campos limpos após a chamada do onSubmit, mas não estou encontrando uma abordagem que funcione.
Solução pensada:
Adicionar dentro do this.state da classe FormularioCadastro as propriedades de titulo e descricao, passando a referenciar o value dos inputs olhando diretamente para essas propriedades.// Alteração no construtor:
constructor(props) {
super(props);
this.titulo = "";
this.descricao = "";
this.categoria = "Sem Categoria";
// Adicionando os valores inicias
this.state = { titulo: '', descricao: '',
categorias: [] };
this._novasCategorias = this._novasCategorias.bind(this);
}
<input
className="form-cadastro_input"
type="text"
placeholder="Título"
value={this.state.titulo} // Aqui em teoria entra o value dinâmico.
onChange={this._handleMudancaTitulo.bind(this)}
/>
<textarea
className="form-cadastro_input"
rows={15}
placeholder="Escreva sua nota..."
value={this.state.descricao} // Aqui em teoria entra o value dinâmico.
onChange={this._handleMudancaDescricao.bind(this)}
/>
Isso com o intuito de manipular o estado dessas informações, adicionando dentro da função de criarNota, a chamada de uma segunda função que altera o estado dos valores para uma string vazia.
// Alteração na função que chama a função da classe pai, chamando a função que limpa os campos.
_criarNota(event) {
event.preventDefault();
event.stopPropagation();
this.props.criarNota(this.titulo, this.descricao, this.categoria);
this._limparFormulario();
}
// Alterando o estado do título e descrição.
_limparFormulario() {
this.setState = {...this.state, titulo: '', descricao: ''}
}
Problema da solução:
Ao determinar a propriedade value dos inputs, eles simplesmente perdem a capacidade de receberem novos valores, literalmente não é mais possível digitar para substituir o valor nos inputs. E mesmo não tendo alteração visual, ao clicar no submit do form, apenas a última tecla pressionada dentro dos campos parece ser computada.
Mesmo ignorando esse problema, ainda sim a mudança dos inputs para vazio após o onSubmit acaba não acontecendo.