反应中的可搜索下拉列表

Question

我在 React 中有可搜索的下拉列表。为此，我使用了 VirtualizedSelect 问题是 onChange 不起作用。

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>

在 printValue 中我正在打印 alert(e.target.value) 它正在打印 undefined.

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

也是现在 list 如下所示。

我想让它像下面这样。我的意思是我想添加“请 select 赞助商”

你能帮我解决这个问题吗？如果我在方法中打印 console.log(e.target.value) 。它抛出以下错误。

编辑1：- 如下所示。

Answer 1

你可以这样处理：

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;

编辑 1：

在您的组件中导入这些行的默认样式

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

编辑 2：由于各种原因，react-select v2 以上版本不提供css 文件。其中一种方法是通过我建议的 copy-pasting 手动添加 css 文件。

截图证明：

反应中的可搜索下拉列表

searchable dropdown list in react

javascript

reactjs

react-select

react-redux

react-hooks