我正在formik
与@jbuschke/formik-antd
. 我需要对+7 (___) ___-__-__
输入应用掩码,所以我想使用react-input-mask
.
同时我需要解析的值,并删除除符号+
和数字,让我处理onChange
和setFieldValue
自己。我可以进入changedValue
控制台日志,但在提交时我得到的是初始值,而不是更改后的值。
这是我的代码和演示:
const CustomInput = props => (
<InputMask {...props}>{inputProps => <Input {...inputProps} />}</InputMask>
);
const CloseForm = () => (
<Formik
initialValues={{ phone: "" }}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
validate={handleValidate}
>
{({ isSubmitting, values, setFieldValue }) => {
return (
<Form>
<FormItem name="phone" label="Phone" required="true">
<CustomInput
mask="+7 (999) 999-99-99"
name="phone"
onChange={e => {
const value = e.target.value || "";
const changedValue = value
.replace(/\)/g, "")
.replace(/\(/g, "")
.replace(/-/g, "")
.replace(/ /g, "");
console.log({ value });
console.log({ changedValue });
setFieldValue("phone", value);
}}
/>
</FormItem>
<SubmitButton type="primary" disabled={isSubmitting}>
Submit
</SubmitButton>
<pre>{JSON.stringify(values, null, 2)}</pre>
</Form>
);
}}
</Formik>
);
如何修复?