React中实现选择框选中后自定义按钮文本的方法咨询

给定如下结构的JSON数组：

[
    {
      "country_code": "AF",
      "country_name": "Afghanistan",
      "country_flag": "🇦🇫",
      "phone_number_code": "+93"
    },
    {
      "country_code": "AL",
      "country_name": "Albania",
      "country_flag": "🇦🇱",
      "phone_number_code": "+355"
    },
    ...
]

需要用<select>和<option>标签实现以下效果：

• 下拉选项的标签为：country_flag + phone_number_code + country_name
• 选项的value值为：phone_number_code
• 选择选项后，选择框按钮显示的内容为：country_flag + phone_number_code

目前已实现前两点，但第三点卡住了，直接操作DOM不符合React最佳实践，需要正确的实现思路。

实现思路与代码示例 #

React中实现自定义select显示内容的核心是受控组件+状态管理，避免直接操作DOM。以下是两种可行方案：

方案一：自定义外观（推荐） #

通过隐藏原生select的视觉样式，用自定义元素展示选中内容，同时保留原生select的交互逻辑（下拉、选择等），兼顾体验与React最佳实践。

import { useState } from 'react';

// 假设countries是你的国家数据数组
const countries = [
  {
    "country_code": "AF",
    "country_name": "Afghanistan",
    "country_flag": "🇦🇫",
    "phone_number_code": "+93"
  },
  {
    "country_code": "AL",
    "country_name": "Albania",
    "country_flag": "🇦🇱",
    "phone_number_code": "+355"
  }
];

const CountrySelect = () => {
  // 初始化选中第一个国家的区号和显示内容
  const [selectedCode, setSelectedCode] = useState(countries[0].phone_number_code);
  const [selectedDisplay, setSelectedDisplay] = useState(
    `${countries[0].country_flag} ${countries[0].phone_number_code}`
  );

  const handleChange = (e) => {
    const code = e.target.value;
    setSelectedCode(code);
    // 根据选中的区号匹配对应国家，更新显示内容
    const matchedCountry = countries.find(c => c.phone_number_code === code);
    if (matchedCountry) {
      setSelectedDisplay(`${matchedCountry.country_flag} ${matchedCountry.phone_number_code}`);
    }
  };

  return (
    <div style={{ position: 'relative', display: 'inline-block' }}>
      {/* 自定义显示框，模拟select按钮外观 */}
      <div 
        style={{
          padding: '8px 12px',
          border: '1px solid #ccc',
          borderRadius: '4px',
          cursor: 'pointer',
          minWidth: '120px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between'
        }}
        onClick={() => document.getElementById('country-select').click()}
      >
        {selectedDisplay}
        <span>▼</span>
      </div>
      {/* 隐藏原生select，但保留其交互功能 */}
      <select
        id="country-select"
        value={selectedCode}
        onChange={handleChange}
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          opacity: 0,
          cursor: 'pointer'
        }}
      >
        {countries.map(country => (
          <option 
            key={country.country_code} 
            value={country.phone_number_code}
          >
            {`${country.country_flag} ${country.phone_number_code} ${country.country_name}`}
          </option>
        ))}
      </select>
    </div>
  );
};

export default CountrySelect;

方案二：动态修改选项文本（简单场景适用） #

利用状态控制<option>的显示文本：选中的选项只展示flag+code，未选中的展示完整标签。缺点是下拉展开时选中项的文本会变短，视觉上有跳跃感，但实现简单。

import { useState } from 'react';

const CountrySelect = () => {
  const [selectedCode, setSelectedCode] = useState(countries[0].phone_number_code);

  const handleChange = (e) => {
    setSelectedCode(e.target.value);
  };

  return (
    <select value={selectedCode} onChange={handleChange}>
      {countries.map(country => (
        <option 
          key={country.country_code} 
          value={country.phone_number_code}
        >
          {selectedCode === country.phone_number_code 
            ? `${country.country_flag} ${country.phone_number_code}`
            : `${country.country_flag} ${country.phone_number_code} ${country.country_name}`}
        </option>
      ))}
    </select>
  );
};

内容的提问来源于stack exchange，提问作者Pritish Budhiraja