将Formik道具从窗体传递给子组件

Question

我试图模块化尽可能多的我可以一个Formik巨大的公式，我有一些麻烦处理onSubmit函数。我不确定如何将Formik的(resetForm)道具传递给子组件，有什么建议吗?

(我简化了下面的代码，因为处理resetForm是我发现的唯一问题)

代码:

<Formik
initialValues={formInitialValues}
validate={values => formValidators(values)}
onSubmit={(values, { resetForm }) => {
dispatch(postCreate(values))
resetForm()
}}
>

我想做的事情与我对"validate"所做的类似。

Answer 1

组件<Formik>的子函数只有一个参数props，其中包括handleReset():

在下面的例子中，handleReset()被解构并传递给另一个子节点。

<Formik
initialValues={{ name: "" }}
onSubmit={async values => {
// dispatch(postCreate(values))
console.log({values})
}}
>
{({
values,
dirty,
isSubmitting,
handleChange,
handleSubmit,
handleReset
}) => {
return (
<form onSubmit={handleSubmit}>
<input
id="name"
type="text"
value={values.name}
onChange={handleChange}
/>
<button
type="button"
className="outline"
onClick={handleReset}
disabled={!dirty || isSubmitting}
>
Reset
</button>
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</form>
);
}}
</Formik>

现场演示