Tengo el siguiente componente Formik.
Me gustaría borrar el campo cada vez que hago clic en el botón "Borrar filtros". Descubrí algo así, pero esto no funciona como esperaba. Esto borra los campos, pero el usuario aún puede ver el valor del campo. ¿Cómo debo implementar esto para borrar el valor de formik y el usuario no verá el valor en el formulario?
const Form = () => { const handleClearFilters = (resetForm, values) => { console.log(values) resetForm(); } return ( <Formik initialValues={{ dog: '', }} onSubmit={() => { // onsubmit functionality }} > {({resetForm, values}) => ( <FormikForm> <Field value={values.dog} name="dog" type="text" as={SearchInput} /> <Styled.ButtonsWrapper> <Styled.Button onClick={() => handleClearFilters(resetForm, values)} kind='secondary'>Clear filters</Styled.Button> <Styled.Button type='submit'>Search</Styled.Button> </Styled.ButtonsWrapper> </FormikForm> )} </Formik> ); }; export default Form;Entrada de búsqueda
const SearchInput = ({ name, ...props }) => { const [, , helpers] = useField(name); const { setValue } = helpers; const handleChange = (value: string | null) => { setValue(value); }; return ( <Styled.Wrapper> <Styled.Input {...props} onChange={handleChange} placeholder="Search for job name" searchType={'primary'} /> </Styled.Wrapper> ); }; export default SearchInput;