Recientemente implementé un teléfono de entrada de reacción personalizado, pero no puedo mostrar las banderas de los países en las opciones y en el país seleccionado. en realidad, no puedo usar PhoneInput directamente porque necesito extraer el país y enviar su etiqueta al servidor (como: 'EE. UU.'). si tiene alguna idea para mostrar banderas en las entradas personalizadas o extraer etiquetas de países seleccionados en la entrada de teléfono predeterminada, responda.
Gracias
estas son mis líneas de código:
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;Puede analizar el valor ingresado en el campo de entrada y obtener el código de país. Puede usar libphonenumber-js para ello.
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;