React - limpando um valor de entrada após o envio do formulário
Me deparam com um problema bastante tolo. Estou no processo de criação do meu primeiro aplicativo React e encontrei um pequeno problema, onde não consigo limpar meu valor de entrada depois de enviar um formulário. A tentei pesquisar no Google esse problema, encontrei alguns tópicos semelhantes aqui, mas não consegui resolver isso. NÃO quero alterar o estado do meu componente / aplicativo, apenas para alterar o valor da entrada para uma string vazia. Tentei limpar o valor da entrada no meuonHandleSubmit()
função, mas recebi um erro:
"Não foi possível definir a propriedade 'valor' de indefinido".
Meu componente SearchBar:
import React, { Component } from "react";
class SearchBar extends Component {
constructor(props) {
super(props);
this.state = {
city: ""
};
this.onHandleChange = this.onHandleChange.bind(this);
this.onHandleSubmit = this.onHandleSubmit.bind(this);
}
render() {
return (
<form>
<input
id="mainInput"
onChange={this.onHandleChange}
placeholder="Get current weather..."
value={this.state.city}
type="text"
/>
<button onClick={this.onHandleSubmit} type="submit">
Search!
</button>
</form>
);
}
onHandleChange(e) {
this.setState({
city: e.target.value
});
}
onHandleSubmit(e) {
e.preventDefault();
const city = this.state.city;
this.props.onSearchTermChange(city);
this.mainInput.value = "";
}
}
export default SearchBar;