Se me presenta un problema bastante tonto. Estoy en el proceso de crear mi primera aplicación React y encontré un pequeño problema, donde no puedo borrar mi valor de entrada, después de enviar un formulario. Intenté buscar en Google este problema, encontré algunos hilos similares aquí, pero no pude resolver esto. NO quiero cambiar el estado de mi componente/aplicación, solo para cambiar el valor de la entrada a una cadena vacía. Intenté borrar el valor de la entrada en mi función onHandleSubmit() , pero recibí un error:
"No se puede establecer la propiedad 'valor' de indefinido".
Mi 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;Tiene un componente controlado donde el valor de input 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 una 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 aún desea mantener el valor en el estado incluso si se envía el formulario, preferiría hacer que la entrada no esté controlada.
<input id="mainInput" onChange={this.onHandleChange} placeholder="Get current weather..." type="text" /> y actualice el valor en el estado onChange y onSubmit borre 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 en nulo:
onHandleSubmit(e) { e.preventDefault(); const city = this.state.city; this.props.onSearchTermChange(city); this.setState({ city: '' }); }