如何在反应中按地区自动设置国家代码？答案

【问题标题】：如何在反应中按地区自动设置国家代码？
【发布时间】：2022-01-23 17:02:07
【问题描述】：

在这个电话号码国家代码中，如何按地区自动设置国家代码。如果我在美国打开网站，它会自动显示国家代码 +1，如果我在印度打开网站，它会自动显示国家代码 +91。像天气 API 一样，是否有任何 API 应该自动检查国家代码

import React from "react";
import PhoneInput, {isValidPhoneNumber
} from "react-phone-number-input";
export default function App() {
  const [fields, setFields] = React.useState([{ value: null }]);

  function handleChange(i, event) {
    if (event) {
      const values = [...fields];
      values[i].value = event;
      setFields((v) => values); 
    }
  }

  return (
    <div className="App">
     
      {fields.map((field, idx) => (
        <PhoneInput
          key={idx}
          id="phoneNumbers1"
          type="text"
          placeholder="Enter phone number "
          value={field.value || ""}
          defaultCountry="IN"
          international
          name="phoneNumbers"
          autoComplete="off"
          onChange={(e) => handleChange(idx, e)}
          
        />
      ))}
      <button
        type="button" >
        Phone Number
      </button>
    </div>
  );
}

【问题讨论】：

到目前为止，你可以在你的 react 应用程序中使用这个库 npmjs.com/package/react-native-country-codes-picker

标签： javascript reactjs api

【解决方案1】：

要检测国家/地区，React 应用需要使用 IP-to-Location 服务查找 IP 地址，例如 IPRegistry

这是一个带有 IPRegistry 的客户端示例：

const getCountryBtn = document.getElementById("getCountry");
const countryNameElement = document.getElementById("country");
getCountryBtn.onclick = function() {
  fetch('https://api.ipregistry.co/?key=tryout')
    .then(function (response) {
        return response.json();
    })
    .then(function (payload) {
        countryNameElement.innerHTML = payload.location.country.name;
    });
}

<html>
<body>
  <button id="getCountry">Get Country</button>
  <div id="country"></div>
</body>
</html>

一旦国家名称可用，其对应的国家代码可以在 React 组件中设置为默认值。

【讨论】：