如何在Formik的Field组件中使用react-phone-number-input

我正在使用Formik并尝试使用此程序包,但是Formik无法看到输入的值,因此无法验证或提交表单。

这是我正在使用的PhonInputField组件...

import PhoneInput from "react-phone-number-input";

const PhoneInputField = ({
    field,form
}) => {
    return (
        <div classname="input-field">
            <PhoneInput
                placeholder="Enter phone number"
                name={field.name}
                value={field.value}
                onChange={field.onChange}
                onBlur={field.onBlur}
            />
        </div>
    );
};

export default PhoneInputField;

这是我在Formik中使用它的方式...

<Formik
    initialValues={initialValues}
    validationSchema={signInSchema}
    onSubmit={handleFormSubmit}
>
    {({
        isValid,isSubmitting,handleChange,handleBlur
    }) => (
        <Form>


                <Field
                    type="tel"
                    name="phone_number"
                    component={PhoneInputField}
                />

            <div classname="cta">
                <button
                    type="submit"
                    disabled={!isValid || isSubmitting}
                    classname="btn btn-primary big"
                >Submit</button>
            </div>
        </Form>
    )}
</Formik>

我在这里做什么错了?

================================================ ========

我试图在这个项目的Github回购页面上问这个问题,但是没有运气。

我也试图这样做……

<PhoneInput
        placeholder="Enter phone number"
        name={field.name}
        value={field.value}
        onChange={value => field.onChange({ value })}
        onBlur={value => field.onBlur({ value })}
/>

但是,Formik仍然看不到字段值。

Venus0808 回答:如何在Formik的Field组件中使用react-phone-number-input

对于那些可能遇到此问题的人,在此处的Github回购页面中对此进行了回答...

https://github.com/catamphetamine/react-phone-number-input/issues/298#issuecomment-557746103

,
onChange={(phone,country) =>
    setValues({
    ...values,phone: phone,countryCode: country.countryCode
    })
}
本文链接:https://www.f2er.com/3056298.html

大家都在问