Solución:
Tienes un componente controlado donde input
el valor está determinado por this.state.city
. Entonces, una vez que envíe, debe borrar su estado, lo que borrará su entrada automáticamente.
onHandleSubmit(e) {
e.preventDefault();
const city = this.state.city;
this.props.onSearchTermChange(city);
this.setState({
city: ''
});
}
Dado que su campo de entrada es un elemento controlado, no puede cambiar directamente el valor del campo de entrada sin modificar el estado.
También en
onHandleSubmit(e) {
e.preventDefault();
const city = this.state.city;
this.props.onSearchTermChange(city);
this.mainInput.value = "";
}
this.mainInput
no hace referencia a la entrada ya que mainInput es un id
, debe especificar una referencia a la entrada
<input
ref={(ref) => this.mainInput= ref}
onChange={this.onHandleChange}
placeholder="Get current weather..."
value={this.state.city}
type="text"
/>
En su estado actual, la mejor manera es borrar el estado para borrar el valor de entrada
onHandleSubmit(e) {
e.preventDefault();
const city = this.state.city;
this.props.onSearchTermChange(city);
this.setState({city: ""});
}
Sin embargo, si por alguna razón desea mantener el valor en el estado incluso si se envía el formulario, prefiere que la entrada no esté controlada.
<input
id="mainInput"
onChange={this.onHandleChange}
placeholder="Get current weather..."
type="text"
/>
y actualizar el valor en estado onChange
y onSubmit
borrar la entrada usando ref
onHandleChange(e) {
this.setState({
city: e.target.value
});
}
onHandleSubmit(e) {
e.preventDefault();
const city = this.state.city;
this.props.onSearchTermChange(city);
this.mainInput.value = "";
}
Habiendo dicho eso, no veo ningún sentido en mantener el estado sin cambios, por lo que la primera opción debería ser el camino a seguir.
this.mainInput
en realidad no apunta a nada. Dado que está utilizando un componente controlado (es decir, el valor de la entrada se obtiene del estado) puede establecer this.state.city
anular:
onHandleSubmit(e) {
e.preventDefault();
const city = this.state.city;
this.props.onSearchTermChange(city);
this.setState({ city: '' });
}