Soy nuevo en reaccionar y acabo de comenzar a usar Formik. Me gusta lo simple que hace que hacer formularios y manejar formularios en reaccionar. He creado varios campos personalizados usando formik, estoy poniendo el campo de selección de reacción que creé como ejemplo aquí.
import { ErrorMessage, Field } from "formik"; import React from "react"; import Select from 'react-select' const SelectInput = (props) => { const { label, name, id,options, required, ...rest } = props; const defaultOptions = [ {label : `Select ${label}`,value : ''} ] const selectedOptions = options ? [...defaultOptions,...options] : defaultOptions return ( <div className="mt-3"> <label htmlFor={id ? id : name}> {label} {required && <span className="text-rose-500">*</span>} </label> <Field // className="w-full" name={name} id={id ? id : name} > {(props) => { return ( <Select options={selectedOptions} onChange={(val) => { props.form.setFieldValue(name, val ? val.value : null); }} onClick = {(e)=>{e.stopPropagation}} {...rest} // I want someting like onReset here ></Select> ); }} </Field> <ErrorMessage name={name} component="div" className="text-xs mt-1 text-rose-500" /> </div> ); }; export default SelectInput;Este es el código habitual que uso para enviar el formulario, como puede ver, estoy usando el método resetForm () proporcionado por formik, quiero adjuntar la lógica de restablecimiento en el método de envío en sí.
const onSubmit = async (values, onSubmitProps) => { try { //send request to api onSubmitProps.resetForm() } catch (error) { console.log(error.response.data); } };Si desea restablecer el valor seleccionado después de enviar el formulario, debe proporcionar un value controlado para el componente Select . El componente Formik Field proporciona el value en el objeto props , para que pueda usarlo.
Por ejemplo:
SelectInput.js
import { ErrorMessage, Field } from 'formik'; import React from 'react'; import Select from 'react-select'; const SelectInput = ({ label, name, id, options, required, ...rest }) => { const defaultOptions = [{ label: `Select ${label}`, value: '' }]; const selectedOptions = options ? [...defaultOptions, ...options] : defaultOptions; return ( <div className='mt-3'> <label htmlFor={id ? id : name}> {label} {required && <span className='text-rose-500'>*</span>} </label> <Field // className="w-full" name={name} id={id ? id : name} > {({ field: { value }, form: { setFieldValue }, }) => { return ( <Select {...rest} options={selectedOptions} onChange={(val) => setFieldValue(name, val ? val : null)} onClick={(e) => e.stopPropagation()} value={value} /> ); }} </Field> <ErrorMessage name={name} component='div' className='text-xs mt-1 text-rose-500' /> </div> ); }; export default SelectInput; y Form.js
import { Formik, Form } from 'formik'; import SelectInput from './SelectInput'; function App() { return ( <Formik initialValues={{ firstName: '', }} onSubmit={async (values, { resetForm }) => { console.log({ values }); resetForm(); }} > <Form> <SelectInput name='firstName' label='First Name' options={[{ label: 'Sam', value: 'Sam' }]} /> <button type='submit'>Submit</button> </Form> </Formik> ); } export default App; Por lo tanto, si hace clic en el botón Submit , se restablecerá el valor en el componente Select .
También puede hacer un enlace useRef al componente Fromik y luego restablecer el formulario dentro de la función de restablecimiento sin agregarlo como parámetro a la función.
https://www.w3schools.com/react/react_useref.asp Es uno de los mejores ganchos que aprenderás a medida que avances en React :)
Entonces, si lo entendí correctamente, desea restablecer un valor de campo específico en onSubmit en lugar de restablecer todo el formulario, eso es exactamente lo que puede lograr usando actions.resetForm() .
Nota: si se especifica
nextState,FormikestableceránextState.valuescomo el nuevo "estado inicial" y usará los valores relacionados denextStatepara actualizar los valoresinitialErrorsdel formulario, así comoinitialValues,initialTouched,initialStatus. Esto es útil para alterar el estado inicial (es decir, "base") del formulario después de que se hayan realizado los cambios.
Puedes comprobarlo con más detalle aquí .
Y aquí hay un ejemplo de cómo restablecer un campo específico usando resetForm() mediante el cual puede ver cuando ingresa el nombre, el correo electrónico y, al enviar, solo el campo de correo electrónico se vaciará usando resetForm .
import "./styles.css"; import React from "react"; import { Formik } from "formik"; const initialState = { name: "", email: "" }; const App = () => ( <div> <h1>My Form</h1> <Formik initialValues={initialState} onSubmit={(values, actions) => { console.log(values, "values"); actions.resetForm({ values: { email: initialState.email } }); }} > {(props) => ( <form onSubmit={props.handleSubmit}> <input type="text" onChange={props.handleChange} onBlur={props.handleBlur} value={props.values.name} name="name" /> <br /> <input type="text" onChange={props.handleChange} onBlur={props.handleBlur} value={props.values.email} name="email" /> <br /> <br /> {props.errors.name && <div id="feedback">{props.errors.name}</div>} <button type="submit">Submit</button> </form> )} </Formik> </div> ); export default App;