ReactJS Select下拉输入控件在iPhone端不显示选中值问题咨询

根本原因 #

不需要替换现有Bootstrap选择组件，这个问题是iOS Safari内核的两个已知兼容性问题导致的，和组件本身无关：

1. iOS Safari 不会渲染自闭合<option />标签的label属性文本，只会读取option标签包裹的内部文本节点。现有代码里所有option都写成了自闭合形式，仅靠label属性传显示文本，安卓、桌面端浏览器可以正常识别label属性渲染，iOS端读不到内部文本就会显示空白。
2. 受控组件值类型不匹配：代码里setDurationHour(intDurationHour)传入的是整数类型，但是option的value属性都是字符串类型，iOS下React受控组件对类型匹配校验更严格，类型不一致时会出现选中状态不生效的问题。

修复步骤 #

• 第一步：把所有自闭合option标签改为双标签形式，将显示文本直接写在标签内部，不要仅依赖label属性传显示值：

  <Form.Control
    as="select"
    name="duration"
    value={durationHour}
    onChange={(e) => setDurationHour(e.target.value)}
  >
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
  </Form.Control>
  

• 第二步：赋值时统一把时长转为字符串类型，和option的value类型保持一致：

  // 原代码 setDurationHour(intDurationHour); 改为
  setDurationHour(String(intDurationHour));
  

• 第三步（可选，处理样式偏移问题）：如果改完后出现文字位置偏移、颜色显示异常，加一段CSS重置iOS默认的select原生样式即可：

  select.form-control {
    -webkit-appearance: none;
    appearance: none;
    color: #212529;
    padding: 0.375rem 0.75rem;
  }
  

效果说明 #

改完之后不需要引入任何第三方替代组件，原生Bootstrap Select在iOS端就可以和安卓、桌面端保持一致的显示效果，原生select唤起系统选择器的体验在iOS端反而比自定义下拉组件更符合系统交互习惯。

异常/正常效果参考 #

• iPhone端异常状态：
• 安卓端正常状态：
• 桌面网页端正常状态：

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