我想在电话字段中将 Formik 与 React-Phone-Input-2 链接,它不允许我使用 HandleChange、HandleBlur 和values.phone 在提交时返回空字符串
我该如何处理?
import { useFormik } from "formik";
import React, { useState } from "react";
import * as Yup from "yup";
import axios from "axios";
import PhoneInput from "react-phone-input-2";
const validationSchema = Yup.object({
phone: Yup.string().required("Phone number is required").matches("^.{10,}$", "Phone number must be not less than 10 numbers"),
});
const userData = {
phone: "",
};
const { values, handleSubmit, handleChange, handleBlur, errors, touched } = useFormik({
initialValues: userData,
onSubmit,
// validate,
validationSchema,
});
return (
<>
<div className="w-75 mx-auto p-lg-5 mb-5">
<h2 className="text-center">Register Now</h2>
<form action="" className="form-register p-4 rounded-3" onSubmit={handleSubmit}>
<label htmlFor="phone">Phone Number: </label>
<PhoneInput
value={values.phone}
onChange={() => handleChange}
onBlur={handleBlur}
country={"eg"}
inputProps={{
id: "phone",
}}
countryCodeEditable={false}
enableSearch={true}
// id="phone"
className=" mb-3"
placeholder="Enter Your Phone Number"
/>
{errors.phone && touched.phone && <p className="alert alert-danger fs-6 p-1">{errors.phone}</p>}
<div className="d-flex justify-content-end">
<button type="submit" className="btn bg-main p-2 text-white rounded-3">
Register
</button>
</div>
</form>
</div>
</>
);
}
我想返回values.phone作为值而不是空字符串
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={onSubmit}
>
{formik => (
<Form>
<PhoneInput
country={"in"}
value={formik.values.phone}
onChange={value => formik.setFieldValue("phone", value)}
onBlur={formik.handleBlur}
placeholder="Enter your Number"
inputClass="field_input1"
/>
</Form>
)}
</Formik>
试试这个