Formik 重置按鈕不會清除表單

Question

我有以下幾點：

    <Formik initialValues={{}} onSubmit={data => console.log(data)}>
        <Form className="h-full">
            <FieldsWrapper className="hide-scrolling-bar">
                {filters?.map(filter => (
                    <FiltersGroup
                        name={filter.label}
                        filters={filter.children}
                    />
                ))}
            </FieldsWrapper>

            <ButtonsWrapper>
                <Button type="submit" text="apply all" isPrimary />
                <Button
                    type="reset"
                    text="clear all"
                    isWishList
                    isPrimary={false}
                />
            </ButtonsWrapper>
        </Form>
    </Formik>

但是重置按鈕不會清除表單

過濾器組組件

...
const FiltersGroup = ({filters, name}) => {
    const Checkbox = ({
        field: {name, value, onChange, onBlur},
        id,
        label,
        className,
        ...props
    }) => {
        return (
            <div className="flex">
                <input
                    name={name}
                    id={id}
                    type="checkbox"
                    value={label}
                    onChange={onChange}
                    onBlur={onBlur}
                    className="hidden"
                    {...props}
                />
                <SizeLabel htmlFor={id}>{label}</SizeLabel>
            </div>
        )
    }
    return (
        <div className="mb-10">
            <GroupLabel>{name}</GroupLabel>
            <div className="flex flex-wrap">
                {filters?.map(filter => (
                    <Field
                        component={Checkbox}
                        name={name}
                        id={`id-${filter}`}
                        label={filter}
                    />
                ))}
            </div>
        </div>
    )
}

export default FiltersGroup

Answer 1

將字段放入 Formik 標簽后：

<Formik
    initialValues={initialValues}
    validationSchema={validationSchema}
    validateOnBlur={false}
    validateOnChange={false}
    onSubmit={async (values, { resetForm }) => {
      await onSubmit(values)

      resetForm()
    }}
  >
    ....

當您單擊提交按鈕時，它會自動重置

編輯：示例：

const initialValues = {
    name: ''
}
               <Formik
                    initialValues={initialValues}>
                    {formik => {
                        console.log('formik props', formik)
                        return (
                            <div>
                                <h1>EDIT USER</h1>
                                <Form>
                                <Field name="name" type="text" />
                <br/><br/><br/>
                                    <div>
                                        <button type="reset" onClick={()=>formik.resetForm()}>
                                            Reset All
                                        </button>
                                    </div>
                                </Form>
                            </div >
                        )
                    }}
                </Formik >

在你的情況下：

<Formik initialValues={{}} onSubmit={data => console.log(data)}>
{formik => {
    <Form className="h-full">
        <FieldsWrapper className="hide-scrolling-bar">
            {filters?.map(filter => (
                <FiltersGroup
                    name={filter.label}
                    filters={filter.children}
                />
            ))}
        </FieldsWrapper>

        <ButtonsWrapper>
            <Button type="submit" text="apply all" isPrimary />
            <Button
                type="reset"
                text="clear all"
                isWishList
                isPrimary={false}
                onClick={()=>formik.resetForm()}
            />
        </ButtonsWrapper>
    </Form>


}}

</Formik>