import React,{ useState} from 'react'; import { Button, Checkbox, Form } from 'semantic-ui-react'; import axios from 'axios'; const Create = () => { const [firstName, setFirstName] = useState(''); const [lastName, setLastName] = useState(''); const [checkbox, setCheckBox] = useState(false);Aquí estoy enviando datos a una API simulada que creé.
const postData = () =>{ axios.post(`https://61cb2af8194ffe0017788c01.mockapi.io/fakeData`,{ firstName, lastName, checkbox }) }Este es el método que creé para restablecer el formulario pero no funciona.
const resetForm = () => { postData(); setFirstName(" "); setLastName(" "); setCheckBox(false); }Este es mi formulario donde, al hacer clic, llamo a la función resetForm pero no se restablece, envía los datos pero no restablece el formulario.
return( <div> <Form> <Form.Field> <label>First Name</label> <input id="f1" placeholder='First Name' onChange={(e)=>setFirstName(e.target.value) } /> </Form.Field> <Form.Field> <label>Last Name</label> <input id="last1" placeholder='Last Name' onChange={(e)=>setLastName(e.target.value)}/> </Form.Field> <Form.Field> <Checkbox id="c1" label='I agree to the Terms and Conditions' onChange={(e)=>setCheckBox(!checkbox)}/> </Form.Field> <Button type='submit' onClick={resetForm}>Submit</Button> </Form> <br></br> <Button onClick={()=>navigate(-1)}>Go Back</Button> </div> ) } export default Create;En realidad, restablecerá el formulario, el problema es que no usa los componentes controlados para mostrar el último valor de actualización en la interfaz de usuario
debe vincular el valor de esta manera:
<input type="text" value={this.state.value} onChange={this.handleChange} />Puede consultar el documento aquí: https://reactjs.org/docs/forms.html
Puede restablecer su formulario usando el método nativo form.reset() .
const Create = () => { const ref = React.useRef(null); const resetForm = () => ref.current.reset(); return ( <div> <Form ref={ref}> <Form.Field> <label>First Name</label> <input id="f1" placeholder="First Name" onChange={(e) => setFirstName(e.target.value)} /> </Form.Field> <Form.Field> <label>Last Name</label> <input id="last1" placeholder="Last Name" onChange={(e) => setLastName(e.target.value)} /> </Form.Field> <Form.Field> <Checkbox id="c1" label="I agree to the Terms and Conditions" onChange={(e) => setCheckBox(!checkbox)} /> </Form.Field> <Button type="submit" onClick={resetForm}> Submit </Button> </Form> <br></br> <Button onClick={() => navigate(-1)}>Go Back</Button> </div> ); }; export default Create;Para eso, debe establecer la propiedad de value en su input . Prueba esto
const Create = () => { const [firstName, setFirstName] = useState(""); const [lastName, setLastName] = useState(""); const [checkbox, setCheckBox] = useState(false); const postData = () => { console.log(firstName, lastName, checkbox); }; const resetForm = () => { postData(); setFirstName(" "); setLastName(" "); setCheckBox(false); }; return ( <div> <Form> <Form.Field> <label>First Name</label> <input id="f1" placeholder="First Name" value={firstName} onChange={(e) => setFirstName(e.target.value)} /> </Form.Field> <Form.Field> <label>Last Name</label> <input id="last1" placeholder="Last Name" value={lastName} onChange={(e) => setLastName(e.target.value)} /> </Form.Field> <Form.Field> <Checkbox id="c1" label="I agree to the Terms and Conditions" checked={checkbox} onChange={(e) => setCheckBox(!checkbox)} /> </Form.Field> <Button type="submit" onClick={resetForm}> Submit </Button> </Form> </div> ); };