Javascript Reactjs：为选择元素（组合框）提供文本输入

我正在尝试实现一个react js select元素。我为该元素提供了一组选项，以便用户可以选择。除此之外，我还需要向该元素添加一个占位符，使其能够键入值并在文本框中输入。然后，用户可以输入自定义值或从下拉列表中选择元素

下面是我用来实现select元素的代码片段。但它只允许选择。谁能帮我实现一个允许输入文本和占位符的select元素

<select className="form-control form-control-sm" ref="LayerL6Select" name="LayerL6Select"  id="LayerL6Select">
<option value="1">Apple</option>    
<option value="2">Mango</option>
</select>

苹果
芒果

如果您正在寻找短期解决方案。我建议您使用下面的react select库，它可以帮助您实现您想要的

否则，如果你在这里要求你个人学习它的源代码，你可以从它的源代码学习

您应该使用

后跟。下面是可以转换为react的html示例。 请注意，应添加

的

id

属性

列表
属性

据

使用输入元素上的
list
属性将
datalist
元素连接到
input
元素



一个
两个
三
感谢您的快速回复。我喜欢这样，而且占位符工作正常。列表也会添加到组合框中。但问题是我在组合框上单击了两次以加载数据。你能帮我解决这个问题并立即加载数据列表吗。