从表单外部重置 React Native Formik 表单

Question

我知道您可以在 Formik 中使用 resetForm 来重置 onSubmit 中的表单。但是，有没有办法通过为其分配一个 ref 并以某种方式调用 rest 表单方法以编程方式重置它？

Answer 1

有一个名为 innerRef 的道具可以为 formik 表单制作 ref

<Formik
   innerRef={(p) => (this.formik = p)}
/>

然后像这样使用它：

onPress={() => this.formik.resetForm()}

或使用功能组件：

const formikRef = useRef();
<Formik
  innerRef={formikRef}
  ...
/>

然后与

一起使用

onPress={() => formikRef.current?.resetForm()}

Answer 2

这是我使用 useFormik 钩子的方法。

import { useFormik } from "formik";

export default function LoginScreen() {

  const formik = useFormik({
    initialValues: {
      email: ""
    },
    onSubmit: (val) => console.log(val),
  });


  return(
    <TextInput
      onChangeText={formik.handleChange("email")}
      value={formik.values.email}
      placeholder="Enter your email"
    />

    {formik.touched.email && <ErrorText>{formik.errors.email}</ErrorText>}

    <Button onPress={formik.handleSubmit}>Login</Button>

    <Button onPress={formik.resetForm}>Clear</Button>
  );
}

从表单外部重置 React Native Formik 表单

Reset a React Native Formik form from outside the form

javascript

reactjs

react-native

formik