ios 选择下拉输入控件ReactJS在iPhone上不显示值

lnxxn5zx 于 2023-06-07 发布在 iOS

关注(0)|答案(1)|浏览(407)

iOS操作系统（iPhone）有问题。选择ReactJS的下拉输入控件不会在iPhone上显示值。网页和Android都没有问题。下面是我的代码：

const [durationHour, setDurationHour] = useState("0");
var getDurationHour = propApptData.duration / 60;
var intDurationHour = ~~getDurationHour;
setDurationHour(intDurationHour);
<Col lg="2">
<Form.Group>
  <Form.Label>
    <FormattedMessage id="GENERAL.DURATION" />
  </Form.Label>
  <Form.Control
    as="select"
    name="duration"
    value={durationHour}
    onChange={(e) => setDurationHour(e.target.value)}
  >
    <option value="0" label="0" />
    <option value="1" label="1" />
    <option value="2" label="2" />
    <option value="3" label="3" />
    <option value="4" label="4" />
    <option value="5" label="5" />
    <option value="6" label="6" />
    <option value="7" label="7" />
    <option value="8" label="8" />
    <option value="9" label="9" />
    <option value="10" label="10" />
    <option value="11" label="11" />
    <option value="12" label="12" />
  </Form.Control>
</Form.Group>
</Col>

iPhone结果如下所示（ERROR）：

Android手机结果如下所示（正确）：

网页结果如下所示（CORRECT）：

我可以知道是否需要使用另一个选择输入 Bootstrap 来替换当前的 Bootstrap 吗？如果替换当前的 Bootstrap ，哪个 Bootstrap 与iOS兼容？或者你们都有很好的解决方案来解决这些iPhone在选择输入上的问题吗？我希望有人能指导我如何解决这个问题。谢谢

ios

来源：https://stackoverflow.com/questions/72988301/select-dropdown-input-control-for-reactjs-doesnt-show-value-on-the-iphone

1条答案

按热度按时间

8i9zcol21#

是的，这里的问题是ios dosent支持选项标签的方式。
iOS 10+

let option = document.createElement('option');
// option.innerText required on iOS 10 and up.
option.label = option.innerText = 'My option label';
option.value = '123';

iOS 7-9

var option = document.createElement('option');
// option.innerText not required on iOS 7-9.
option.label = 'My option label';
option.value = '123';

应该是

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

赞(0）回复(0）举报 2023-06-07

我来回答

ios 选择下拉输入控件ReactJS在iPhone上不显示值

1条答案

相关问题

热门标签

最新问答