如何在 React 的 MuiPhoneNumber 中获取 phone 号码而不是国家代码

Question

我正在使用 MuiPhoneNumber 库来获取国家代码然后添加号码，但是当我提交值时此字段仅 returns 国家代码。

<MuiPhoneNumber
              fullWidth
              defaultCountry={"de"}
              value={formik.values.phone}
              onChange={formik.handleChange}
              error={formik.touched.phone && Boolean(formik.errors.phone)}
              helperText={formik.touched.phone && formik.errors.phone}
            />

formik.values.phone 的值为“DE”，当我输入号码时，如何获取号码而不是国家代码

Answer 1

假设 MuiPhoneNumber 来自图书馆 material-ui-phone-number the onChange event is called with the actual value but formik expects an event. You need to imperatively set the value yourself using setFieldValue。

import { Button } from "@mui/material";
import { useFormik } from "formik";
import MuiPhoneNumber from "material-ui-phone-number";

export default function App() {
  const formik = useFormik({
    initialValues: { phone: "" },
    onSubmit: (values) => alert(JSON.stringify(values, null, 2))
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <MuiPhoneNumber
        fullWidth
        defaultCountry={"de"}
        value={formik.values.phone}
        onChange={(value) => formik.setFieldValue("phone", value)}
        error={formik.touched.phone && Boolean(formik.errors.phone)}
        helperText={formik.touched.phone && formik.errors.phone}
      />
      <Button type="submit">Submit</Button>
    </form>
  );
}

但这并不能解释为什么您的 formik 值中包含国家/地区代码。它肯定不能来自您在 MuiPhoneNumber 字段中输入的任何内容，因为您没有正确连接它。

如何在 React 的 MuiPhoneNumber 中获取 phone 号码而不是国家代码

How to get the phone number not the country code in MuiPhoneNumber in React

reactjs

material-ui