如何在React项目中使用Twilio脚本标签实现国际国家列表下拉框

步骤1：引入依赖资源 #

在React项目public/index.html的<head>标签中添加要求的CSS和JS资源：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/css/intlTelInput.css">
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/intlTelInput.min.js"></script>

步骤2：编写React组件实现功能 #

核心思路是通过useRef绑定真实输入框DOM，在useEffect中监听DOM挂载完成且全局脚本加载完成后，调用window上的初始化方法：

import { useRef, useEffect, useState } from 'react';

const PhoneInput = () => {
  const inputRef = useRef(null);
  const itiInstance = useRef(null);
  const [phoneNumber, setPhoneNumber] = useState('');

  useEffect(() => {
    // 确保脚本加载完成、DOM挂载后再初始化
    if (!inputRef.current || !window.intlTelInput) return;

    // 初始化插件，参数可根据需求自定义
    itiInstance.current = window.intlTelInput(inputRef.current, {
      preferredCountries: ['cn', 'us'],
      separateDialCode: true,
      utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/utils.js",
    });

    // 组件卸载时销毁实例，避免内存泄漏
    return () => {
      if (itiInstance.current) {
        itiInstance.current.destroy();
      }
    };
  }, []);

  // 提交时获取完整国际格式号码
  const handleSubmit = (e) => {
    e.preventDefault();
    if (itiInstance.current) {
      const fullNumber = itiInstance.current.getNumber();
      const isNumberValid = itiInstance.current.isValidNumber();
      if (isNumberValid) {
        setPhoneNumber(fullNumber);
        // 后续业务逻辑
        console.log('有效号码：', fullNumber);
      } else {
        console.log('请输入有效的手机号码');
      }
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input ref={inputRef} type="tel" />
      <button type="submit">提交</button>
      {phoneNumber && <p>已提交号码：{phoneNumber}</p>}
    </form>
  );
};

export default PhoneInput;

注意事项 #

• 不要将输入框绑定为React受控组件，插件会直接操作真实DOM修改输入内容，强制绑定value会导致冲突
• 如果出现脚本加载未完成导致初始化失败的问题，可以给脚本添加onload监听，或者在组件中加轮询判断window.intlTelInput是否存在
• 所有原生场景下支持的实例方法（比如获取国家代码、格式化号码等）都可以通过itiInstance.current直接调用，和原生使用逻辑完全一致

内容的提问来源于stack exchange，提问作者Kenny Quach