Tengo un formulario con campos de entrada. Después de enviar el formulario, los campos de entrada deben borrarse. Traté de establecer el estado en una matriz vacía, no funcionó, luego intenté usar referencias, tampoco funcionó para mí ...

Esta función activa el evento onSubmit.

addHaspInfo = (e) => {  
 // e.preventDefault();  
    axios.post("/hasp", {
      company: {
            name: e.target[3].value,
            city: e.target[4].value,
            phone: e.target[5].value
            },
            numberOfKeys: e.target[2].value,                      
            serial: e.target[0].value,
            soft: e.target[1].value,
      })
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      })
      axios.get("/hasp") 
      .then((haspData) => {
        console.log(haspData.data);
        this.setState({
          hasps: haspData.data
        });
      }); 
      this.setState({
          hasps: []      //this don't reset input fields
        });        
  }
<form id="formId" className="form-group haspAddForm" onSubmit={this.addHaspInfo}>

Ant esto tampoco funcionó:

 clearInput = () => {
        this.setState({hasps: []});
        ReactDOM.findDOMNode(this.refs.myInput).focus();  //this don't reset input fields
       } 
<button onClick={this.clearInput} className="btn btn-primary" type="submit"  style={{marginBottom:'40px', marginRight: '110px'}}>Add new hasp info</button> 

Uno de los campos de entrada.

<input ref="myInput" type="text" className="form-control" value={this.state.serial} placeholder="00000-00000" required /><br />
0
Yurii 11 may. 2019 a las 00:08

3 respuestas

La mejor respuesta

El valor de su entrada es this.state.serial. Para restablecer el valor de entrada, puede establecer la propiedad 'serial' en el estado para vaciar la cadena.

Ejemplo:

this.setState({ serial: "" })

En su código, está configurando la propiedad hasp para vaciar la matriz. Pero no está utilizando esta propiedad en su campo de entrada. Por lo tanto, restablecer esta propiedad no tiene ningún efecto. Debe restablecer en su estado, todas las propiedades que utiliza en el accesorio value de las entradas en su formulario.

Le sugiero que lea https://reactjs.org/docs/forms.html para comprender cómo funcionan las formas en reaccionar.

En su función de envío, puede obtener los valores del estado. No es necesario usar la matriz e.target. Esto deja el código confuso.

El mejor enfoque para reaccionar es utilizar entradas controladas. Puede ver: https://goshakkk.name/controlled-vs-uncontrolled-inputs -react /

0
Hugo Ramos Freire Neto 10 may. 2019 a las 21:30

Tratar

clearInput = ()=>{
  this.setState({...this.state,
                  serial: ""
                })
  }

Así es como restablece los campos de entrada. Extienda en el estado, luego establezca el estado que representa el valor de los campos de entrada en cadenas vacías.

0
Brad Ball 10 may. 2019 a las 21:44

Intente pasar una devolución de llamada a su método .setState(). Eso funcionó para mí.

this.setState({
  hasps: []      
  }, e.target.reset()
); 
0
keikai 4 may. 2020 a las 19:31