如何在反应中的自定义反应输入手机中显示国旗？

Question

最近我实现了一个自定义反应输入电话，但我无法在选项和所选国家/地区显示国旗。 实际上，我无法直接使用 PhoneInput，因为我需要提取国家/地区并将其标签发送到服务器（例如：“美国”）。 如果您有任何想法在自定义输入中显示标志或在默认 PhoneInput 中提取选定的国家/地区标签，请回答。

谢谢

这是我的代码行：

import Input, {
  getCountries,
  getCountryCallingCode,
} from "react-phone-number-input/input";
import en from "react-phone-number-input/locale/en.json";
import "react-phone-number-input/style.css";

const RegisterForm = () => {
  const [onFocuseInput, setOnFocuseInput] = useState("");
  const [phoneNumber, setPhoneNumber] = useState();
  const [country, setCountry] = useState();

const CountrySelect = ({ value, onChange, labels, ...rest }) => (
    <select
      {...rest}
      value={value}
      onChange={(event) => {
        onChange(event.target.value || undefined);
      }}
    >
      <option value="">country</option>
      {getCountries().map((country) => (
        <option key={country} value={country}>
          {labels[country]} +{getCountryCallingCode(country)}
        </option>
      ))}
    </select>
  );


 <div className="mb-6 flex">
          <CountrySelect
            className={`border-b-2 bg-none outline-none w-1/4 text-xs ${
              onFocuseInput === "country"
                ? "border-blue-700 "
                : "border-gray-300"
            }`}
            labels={en}
            value={country}
            onChange={setCountry}
            name="countrySelect"
            onFocus={() => setOnFocuseInput("country")}
          />
          <Input
            className={`${
              onFocuseInput === "phoneNumber"
                ? "focusedInput w-full"
                : "registerInput w-full"
            }`}
            placeholder="phoneNumber"
            dir="ltr"
            country={country}
            value={phoneNumber}
            onChange={setPhoneNumber}
            name="phoneNumber"
            onFocus={() => setOnFocuseInput("phoneNumber")}
            required
          />
        </div>
        {loading ? (
          <div className="flex justify-center items-center my-5 bg-red-600 p-4 rounded-full">
            <div
              className="spinner-border animate-spin inline-block w-8 h-8 border-4 border-blue-700 border-t-white rounded-full"
              role="status"
            ></div>
          </div>
  );
};

export default RegisterForm;

Answer 1

onCountryChange

事件，您可以通过添加

onCountryChange

事件监听来获取countryCode。附上代码供参考。

import * as React from "react";
import { useForm, Controller } from "react-hook-form";

import PhoneInput, {
  parsePhoneNumber,
  getCountryCallingCode
} from "react-phone-number-input";

import "react-phone-number-input/style.css";
import "./styles.css";

export default function App() {
  const [countryCode, setCountryCode] = React.useState("DE");

  const {
    control,
    formState: { errors },
    handleSubmit
  } = useForm();

  const onSubmit = (data) => console.log(data);

  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Controller
          name="cellphone"
          rules={{
            validate: {
              isValid: (value) => {
                if (value) {
                  const callingCode = getCountryCallingCode(countryCode);
                  if (!new RegExp(`^\\+${callingCode}$`).test(value)) {
                    return !!parsePhoneNumber(value);
                  }
                }
                return true;
              }
            }
          }}
          control={control}
          render={({ field }) => (
            <PhoneInput
              {...field}
              onCountryChange={(v) => setCountryCode(v)}
              limitMaxLength={true}
              international={true}
              defaultCountry="DE"
            />
          )}
        />
        {errors.cellphone?.type === "isValid" && (
          <span className="validation-message">Enter a valid phone number</span>
        )}
        <input type="submit" />
      </form>
    </>
  );
}

Answer 2

您可以解析输入字段中输入的值并获取国家代码。您可以使用 libphonenumber-js 来实现。

import React, { useState } from "react";
import Input, {parsePhoneNumber} from "react-phone-number-input";
import "react-phone-number-input/style.css";

const RegisterForm = () => {
  const [onFocuseInput, setOnFocuseInput] = useState("");
  const [phoneNumber, setPhoneNumber] = useState("");
  const [country, setCountry] = useState("");

  const handleChange = (value) => {
    let p = "";
    let c = "";
    const parsedValue = parsePhoneNumber(value ? value : "", 'US');
    if (parsedValue) {
      p = parsedValue.nationalNumber;
      c = parsedValue.countryCallingCode;
    }
    setPhoneNumber(p);
    setCountry(c);
  };

  return (
    <div>
      <div className="mb-6 flex">
        <Input
          className={`${
            onFocuseInput === "phoneNumber"
              ? "focusedInput w-full"
              : "registerInput w-full"
          }`}
          placeholder="phoneNumber"
          dir="ltr"
          defaultCountry="US"
          limitMaxLength
          onChange={handleChange}
          name="phoneNumber"
          onFocus={() => setOnFocuseInput("phoneNumber")}
          required
        />
      </div>
    </div>
  );
};

export default RegisterForm;

Answer 3

您只需在 PhoneInput 元素上使用属性国家/地区 phoneInput 国家/地区属性示例

Answer 4

我想显示国旗而不是国家名称。有运气吗？