Javascript react中的可搜索下拉列表

import VirtualizedSelect from 'react-virtualized-select'
import "react-virtualized-select/styles.css";
import 'react-virtualized/styles.css'
<VirtualizedSelect
       id="sponsor" 
       name="sponsor"
       defaultValue="Please"
       className="form-control"
       placeholder="Sponsor"
       options=  { active && result.map((sponsor:Sponsor,index:number)=>
           ({label: sponsor.name, value: sponsor.name})
       
       )} 
       onChange={ (e:any)=>{printValue(e)}}
        }>
</VirtualizedSelect>

const printValue=(e:any)=>{
    alert("value is"+e.target.value);
}

import React, { useState } from "react"

import VirtualizedSelect from 'react-virtualized-select'

function App() {

  const options = [
    { label: "One", value: 1 },
    { label: "Two", value: 2 },
    { label: "Three", value: 3 },
    { label: "Four", value: 4 },
    { label: "Five", value: 5 },
    { label: "Six", value: 6 }
  ]

  const [item, setItem] = useState(null)

  return (
    <>
      <VirtualizedSelect
        options={options}
        onChange={(value) => setItem(value)}
        value={item}
      />
    </>
  )
}

export default App;

import 'react-select/dist/react-select.css'
import 'react-virtualized/styles.css'
import 'react-virtualized-select/styles.css'

Javascript相关问答推荐

详细更改参考价值："

我无法使用tailwind-css和reactJS修改图像的位置

Next.js Next/Image图像隐含性有任何类型-如何修复？

TypScript界面中的Infer React子props

我试图实现用户验证的reduxstore 和操作中出了什么问题？

react/redux中的formData在expressjs中返回未定义的req.params.id

Phaser 3 console. log()特定游戏角色的瓷砖属性

在vercel throws上部署带有gunjs的sveltekit应用无法找到模块./' lib/文本编码'

如何从URL获取令牌？

编辑文本无响应.onClick(扩展脚本)

在Matter.js中添加从点A到另一个约束的约束

Webpack在导入前混淆文件名

在JS中动态创建对象，并将其追加到HTML表中

在SHINY R中的嵌套模块中，不能使用Java代码

从逗号和破折号分隔的给定字符串中查找所有有效的星期几

警告框不显示包含HTML输入字段的总和

FileReader()不能处理Firefox和GiB文件

当我点击一个按钮后按回车键时，如何阻止它再次被点击

将Auth0用户对象存储在nextjs类型脚本的Reaction上下文中

JavaScript -复制到剪贴板在Windows计算机上无效