React Native 和 Formik 将自定义参数传递给 onSubmit

Question

我正在使用 Formik 提交我的表格。我正在尝试向我的 onSubmit 函数添加自定义参数，以便我可以获得表单的 values 和该自定义参数。

const handleSubmit = async (customParam) => {
    console.log(customParam);
    console.log('Values : ');
    console.log(values);
}


<AppForm initialValues={{ rejectionComment: "" }} onSubmit={handleSubmit(myCustomParam)}> //My FORMIK form
    <AppFormField multiline={true} numberOfLines={4} name="rejectionComment" secured={false} autoCapitalize="none" autoCorrect={false}/>
    <SubmitButton title="Valider" /> //Validation button
</AppForm>

使用此代码，我可以记录 myCustomParam 但我无法获取 [Unhandled promise rejection: ReferenceError: values is not defined]

形式的值

如果我将 onSubmit 更改为 onSubmit={handleSubmit} 并将 handleSubmit 更改为 const handleSubmit = async (values) => {console.log(values);} 我可以记录我的值，但不能添加我的自定义参数。

你能提供一些帮助吗？

Answer 1

安倍直言不讳。通过使用回调，我已经能够定义值和自定义参数：

onSubmit={(values) => handleSubmit(values, "test")}

const handleSubmit = async (values, customParam) => {
    console.log(values);
    console.log(customParam);
}

Answer 2

您可以通过两个更改来完成此操作。

更改您的 handleSubmit 函数以接受两个参数（它也不需要异步，除非您做的事情比此处显示的更多）。

const handleSubmit = (values, customParam) => {
  console.log({ values, customParam });
};

通过 Formik 提供的 values。

<AppForm
  onSubmit={values => { handleSubmit(values, myCustomParam); })}
  ...
>

解释：

当您将代码更改为 onSubmit={handleSubmit) 时，Formik 组件会使用表单值调用它。其完整格式为 onSubmit={values => handleSubmit(values)}。由于您的自定义参数是在 Formik 之外定义的，因此您需要手动将其传递给函数。

React Native 和 Formik 将自定义参数传递给 onSubmit

React Native & Formik pass custom params to onSubmit

javascript

react-native

expo

formik