反应-在“选择标签”中使用地图时添加默认选项

问题描述 投票:0回答:2

[我了解到,使用Select时,下拉菜单中的每个元素都由Option标签给定。

现在我有一个下拉列表必须包含的值数组-

a = ['hai','hello','what']

所以我通过如下编写代码来优化了我的代码-

     <Select>  
          a.map(ele =>
        <Option value={ele}> ele </Option> )
     </Select>

此操作成功。但是现在我想添加一个默认值以在第一个渲染中显示。我尝试这样做-

<Select>
      <Option selected={true}> Choose from the list</Option
      a.map(ele =>
            <Option value={ele}> ele </Option> )
</Select>

但是这会导致错误。什么是正确的方法?

javascript reactjs typescript
2个回答
0
投票

map的第二个参数用作索引。然后选择index === 0

<Select>
      <Option value=""> Choose from the list</Option
      a.map((ele, index) => <Option value={ele} selected={index === 0}> {ele} </Option>)
</Select>

0
投票

您可以尝试这个:

<Select name="select" id="select" >
    {
        a.map(ele => (
            <option key={ele} >{ele}</option>
        ))
    }
</Select>
© www.soinside.com 2019 - 2024. All rights reserved.