Reaccionar: borrar un valor de entrada después de enviar el formulario

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: '' });
}

---

---

Utiliza Nuestro Buscador