React中select下拉菜单实现选中项展示+其余两个可选值的方法

实现方案 #

你可以通过提前过滤选项列表的方式实现需求，不需要在return里写额外的分支脚本，具体实现如下：

1. 首先把站点选项抽成公共配置，避免硬编码

// 可放在组件外部减少重复创建
const siteOptions = [
  { value: 'MAR', label: 'MARKHAM' },
  { value: 'OTT', label: 'OTTAWA' }
]

2. 修改select组件的写法，绑定value属性实现受控选中，通过hidden属性隐藏已选选项避免下拉列表重复展示：

<select
  onInput={(e) => onTyping(e.target.name, e.target.value)}
  name="site"
  id="site"
  onChange={handleInputChange}
  value={myData.site} // 绑定当前值实现默认/受控选中
>
  {/* 渲染当前选中的项，设置hidden属性让它不出现在下拉列表中 */}
  <option 
    value={myData.site}
    hidden
  >
    {myData.site === 'MAR' ? 'MARKHAM' : 'OTTAWA'}
  </option>
  {/* 过滤掉已选中的站点，只展示另一个可选选项 */}
  {siteOptions
    .filter(option => option.value !== myData.site)
    .map(option => (
      <option key={option.value} value={option.value}>
        {option.label}
      </option>
    ))
  }
</select>

逻辑说明 #

• 当myData.site == 'MAR'时，select绑定值为MAR，输入框默认显示MARKHAM，过滤后下拉列表仅展示OTTAWA选项
• 当myData.site == 'OTT'时，select绑定值为OTT，输入框默认显示OTTAWA，过滤后下拉列表仅展示MARKHAM选项
• 为React标准JSX语法，不会触发框架语法报错

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