javascript - react 中的可搜索下拉列表

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 如下所示。

我希望它像下面这样。我的意思是我想添加“请选择赞助商”

你能帮我解决这个问题吗？如果我在方法中打印 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 upwards 由于各种原因不提供css文件。其中一种方法是通过我建议的复制粘贴手动添加 css 文件。

截图证明: