如何清空Formik表单字段？解决清空后输入框仍显示值的问题

你的问题出在输入框没有和Formik的字段状态做双向绑定：

• SearchInput组件里的Styled.Input没有绑定Formik管理的字段值，导致Formik调用resetForm()清空状态后，输入框无法同步更新显示内容。
• 手动给Field组件传递value={values.dog}属于冗余操作，Field组件会自动将Formik的字段props传递给自定义组件。

1. 修改SearchInput组件，绑定Formik字段值 #

从useField钩子中获取字段的当前值，绑定到输入框的value属性上，确保输入框显示与Formik状态同步：

const SearchInput = ({ name, ...props }) => {
  // 获取field对象，包含当前字段的value
  const [field, , helpers] = useField(name);
  const { setValue } = helpers;

  const handleChange = (value: string | null) => {
    setValue(value);
  };

  return (
    <Styled.Wrapper>
      <Styled.Input
        {...props}
        value={field.value} // 绑定Formik的字段值到输入框
        onChange={handleChange}
        placeholder="Search for job name"
        searchType={'primary'}
      />
    </Styled.Wrapper>
  );
};

export default SearchInput;

2. 调整Form组件，移除冗余的value传递 #

去掉Field组件上手动传递的value属性，让Formik自动管理字段props：

const Form = () => {
  const handleClearFilters = (resetForm) => {
    resetForm(); // 直接调用重置到initialValues
  };

  return (
    <Formik
      initialValues={{
        dog: '',
      }}
      onSubmit={() => {
        // onsubmit functionality
      }}
    >
      {({ resetForm }) => (
        <FormikForm>
          {/* 移除手动传递的value，由Field自动处理 */}
          <Field name="dog" type="text" as={SearchInput} />
          <Styled.ButtonsWrapper>
            <Styled.Button onClick={() => handleClearFilters(resetForm)} kind='secondary'>Clear filters</Styled.Button>
            <Styled.Button type='submit'>Search</Styled.Button>
          </Styled.ButtonsWrapper>
        </FormikForm>
      )}
    </Formik>
  );
};

export default Form;

修改后，点击“Clear filters”按钮调用resetForm()时，Formik会将字段值重置为初始空字符串，输入框会同步显示为空，实现预期效果。

内容的提问来源于stack exchange，提问作者huhWell