使用搜索字段创建选择项

Question

我正在尝试在ReactJs中创建一个带有搜索字段的选择，但是我发现的每个示例都使用Jquery。

我如何在ReactJs中做到这一点？

有人可以帮我吗？我现在从React开始。

<select className="selectpicker">
     <option>Mustard</option>
     <option>Ketchup</option>
     <option>Relish</option>
</select>

Answer 1

创建一个名为MySelect.js的文件

在该文件中，输入此代码

const MySelect = () => {
  return (
    <select className="selectpicker">
      <option>Mustard</option>
      <option>Ketchup</option>
      <option>Relish</option>
    </select>
   )
}

export default MySelect

然后，在您要使用选择的其他文件中，执行此操作

import MySelect from './MySelect'

<div>
  <MySelect />
</div>

当然，在该组件中包含静态数据毫无意义。您应该通过道具传递选项，例如

<MySelect options=['Mustard', 'Ketchup', 'Relish'] />

然后在MySelect.js中，您可以执行此操作：

const MySelect = props => ...并使用props.options来填充选择内容>