React-phone-input-2 结合Formik时values.phone返回空字符串的解决咨询

你的问题出在onChange和onBlur的绑定方式不正确，导致Formik无法更新手机号字段的状态，最终提交时values.phone为空。以下是具体修复方案：

核心问题拆解 #

1. onChange未传递输入值：当前onChange={() => handleChange}没有将用户输入的手机号传递给Formik，无法触发values.phone的更新。
2. onBlur未关联指定字段：直接传递handleBlur无法让Formik识别是哪个字段触发了失焦事件，导致touched.phone状态无法被正确标记。

分步修复 #

1. 新增Formik的setFieldValue方法 #

从useFormik的返回值中解构setFieldValue，它可以直接更新Formik中指定字段的数值：

const { values, handleSubmit, handleBlur, errors, touched, setFieldValue } = useFormik({
  initialValues: userData,
  onSubmit: (values) => {
    // 在此添加你的提交逻辑（比如调用axios接口）
    console.log(values); // 此时能正常获取到phone字段的值
  },
  validationSchema,
});

2. 修正PhoneInput的事件绑定 #

• 使用setFieldValue直接更新phone字段
• 调用handleBlur时明确指定字段名，标记该字段为已触碰
• 给inputProps添加name属性，确保Formik能正确关联字段

修正后的PhoneInput组件：

<PhoneInput
  value={values.phone}
  onChange={(phone) => setFieldValue('phone', phone)} // 将输入的手机号同步到Formik状态
  onBlur={() => handleBlur('phone')} // 指定字段触发失焦事件
  country="eg"
  inputProps={{
    id: "phone",
    name: "phone" // 新增name属性，强化字段关联
  }}
  countryCodeEditable={false}
  enableSearch={true}
  className="mb-3"
  placeholder="Enter Your Phone Number"
/>

3. 可选：优化验证规则 #

如果需要验证包含国家码的完整手机号，可以调整Yup的正则表达式，确保匹配带+号的国际号码格式：

const validationSchema = Yup.object({
  phone: Yup.string()
    .required("Phone number is required")
    .matches(/^\+\d{10,}$/, "Phone number must be a valid international number with at least 10 digits"),
});

完整修复后的代码 #

import { useFormik } from "formik";
import React 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(/^\+\d{10,}$/, "Phone number must be a valid international number with at least 10 digits"),
});

const userData = {
  phone: "",
};

const RegisterForm = () => {
  const { values, handleSubmit, handleBlur, errors, touched, setFieldValue } = useFormik({
    initialValues: userData,
    onSubmit: async (values) => {
      try {
        // 示例提交逻辑
        await axios.post("/api/register", values);
        console.log("注册成功");
      } catch (err) {
        console.error("注册失败", err);
      }
    },
    validationSchema,
  });

  return (
    <>
      <div className="w-75 mx-auto p-lg-5 mb-5">
        <h2 className="text-center">Register Now</h2>
        <form className="form-register p-4 rounded-3" onSubmit={handleSubmit}>
          <label htmlFor="phone">Phone Number: </label>
          <PhoneInput
            value={values.phone}
            onChange={(phone) => setFieldValue("phone", phone)}
            onBlur={() => handleBlur("phone")}
            country="eg"
            inputProps={{
              id: "phone",
              name: "phone",
            }}
            countryCodeEditable={false}
            enableSearch={true}
            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>
    </>
  );
};

export default RegisterForm;

修改完成后，values.phone将正确获取输入的手机号，handleBlur也能正常标记字段状态，表单验证和提交功能即可正常运行。

内容的提问来源于stack exchange，提问作者Mazen Yousry