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 />
3 respuestas
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 /
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.
Intente pasar una devolución de llamada a su método .setState(). Eso funcionó para mí.
this.setState({
hasps: []
}, e.target.reset()
);
Preguntas relacionadas
Nuevas preguntas
reactjs
React es una biblioteca de JavaScript para crear interfaces de usuario. Utiliza un paradigma declarativo basado en componentes y tiene como objetivo ser eficiente y flexible.