在 Formik 中使用 setFieldValue onSubmit
Using setFieldValue onSubmit in Formik
我将 formik
与 @jbuschke/formik-antd
和 react-input-mask
一起使用。我有一个掩码 +7 (___) ___-__-__
应用于输入之一,我需要解析它 onSubmit
以删除不必要的符号。
我定义了一个 const changedValue
,然后在 setFieldValue
中使用它,但我收到以下错误:
Invariant Violation
Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
这是我的代码和 demo:
const CloseForm = () => (
<Formik
initialValues={{ phone: "", email: "" }}
onSubmit={(values, { setSubmitting, setFieldValue }) => {
const changedValue = values.phone.replace(/\(|\)|\s|-/g, "");
setTimeout(() => {
setFieldValue("phone", changedValue);
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
validate={validatePhone}
>
{({ isSubmitting, values, handleChange }) => {
return (
<Form>
<FormItem name="phone" label="Phone" required="true">
<CustomInput
mask="+7 (999) 999-99-99"
name="phone"
onChange={handleChange}
/>
</FormItem>
<FormItem name="email" label="Email">
<Input name="email" />
</FormItem>
<SubmitButton type="primary" disabled={isSubmitting}>
Submit
</SubmitButton>
<pre>{JSON.stringify(values, null, 2)}</pre>
</Form>
);
}}
</Formik>
);
我该如何解决这个问题?或者可能有更好的方法使用 setFieldValue
来解析值?
您可以在不更改字段的情况下修改要提交的值,例如:
onSubmit={values => {
const phone = values.phone.replace(/\(|\)|\s|-/g, "")
const valuesToSend = { ...values, phone }
alert(JSON.stringify(valuesToSend, null, 2))
}}
我将 formik
与 @jbuschke/formik-antd
和 react-input-mask
一起使用。我有一个掩码 +7 (___) ___-__-__
应用于输入之一,我需要解析它 onSubmit
以删除不必要的符号。
我定义了一个 const changedValue
,然后在 setFieldValue
中使用它,但我收到以下错误:
Invariant Violation
Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
这是我的代码和 demo:
const CloseForm = () => (
<Formik
initialValues={{ phone: "", email: "" }}
onSubmit={(values, { setSubmitting, setFieldValue }) => {
const changedValue = values.phone.replace(/\(|\)|\s|-/g, "");
setTimeout(() => {
setFieldValue("phone", changedValue);
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
validate={validatePhone}
>
{({ isSubmitting, values, handleChange }) => {
return (
<Form>
<FormItem name="phone" label="Phone" required="true">
<CustomInput
mask="+7 (999) 999-99-99"
name="phone"
onChange={handleChange}
/>
</FormItem>
<FormItem name="email" label="Email">
<Input name="email" />
</FormItem>
<SubmitButton type="primary" disabled={isSubmitting}>
Submit
</SubmitButton>
<pre>{JSON.stringify(values, null, 2)}</pre>
</Form>
);
}}
</Formik>
);
我该如何解决这个问题?或者可能有更好的方法使用 setFieldValue
来解析值?
您可以在不更改字段的情况下修改要提交的值,例如:
onSubmit={values => {
const phone = values.phone.replace(/\(|\)|\s|-/g, "")
const valuesToSend = { ...values, phone }
alert(JSON.stringify(valuesToSend, null, 2))
}}