如何將 react-phone-number-input 與 Formik 的 Field 組件一起使用

Question

我正在使用 Formik 並嘗試使用此 package，但 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 仍然看不到字段值。

Answer 1

對於那些可能遇到這個問題的人，這里的 Github 回購頁面已經回答了這個問題......

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

Answer 2

onChange={(phone, country) =>
    setValues({
    ...values,
    phone: phone,
    countryCode: country.countryCode
    })
}