React - 在 Select 标签中使用 map 时添加默认选项

Question

我了解到，当使用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>

但这给出了一个错误。 正确的方法是什么？

Answer 1

使用map的第二个参数作为索引。 并且index === 0然后它将被选中。

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

Answer 2

你可以试试这个：

 <Select name="select" id="select" > { a.map(ele => ( <option key={ele} >{ele}</option> )) } </Select>