反应中的可搜索下拉列表

Question

我在反应中有以下列表。

<select
    id="sponsor" 
    name="sponsor"
    className="form-control"
    placeholder="Sponsor"
    }
    >
    <option value="" selected>Please select the sponsor</option>
     {
     active && result.map((sponsor:Sponsor,index:number)=>
          <option  value={sponsor.id} >{sponsor.name}</option>    
      )
    }

</select>

它工作得很好。现在我需要将其更改为可搜索列表。我在下面做了。

     import VirtualizedSelect from 'react-virtualized-select'
    import "react-virtualized-select/styles.css";
    import 'react-virtualized/styles.css'
     

 <VirtualizedSelect
        id="sponsor" 
        name="sponsor"
        className="form-control"
        placeholder="Sponsor"
        options={ active && result.map((sponsor:Sponsor,index:number)=>
            {sponsor.name}
          
        )}

     >
       </VirtualizedSelect>

现在列表中没有任何内容。基本上我的要求是使列表可搜索并将 API 的数据插入该列表。

你能帮我做同样的事情吗？任何其他选项也将非常有帮助

Edit1:-

我需要如下列表。第一行“请选择赞助商”

Answer 1

根据此处的 VirtualizedSelect 文档 https://www.npmjs.com/package/react-virtualized-select，该组件接受如下对象数组：

    const options = [
      { label: "One", value: 1 },
      { label: "Two", value: 2 },
      { label: "Three", value: 3, disabled: true }
      // And so on...
    ]

不是字符串数组，我认为这是行不通的方式，我建议将您的代码更改为：

 <VirtualizedSelect
        id="sponsor" 
        name="sponsor"
        className="form-control"
        placeholder="Sponsor"
        options={ active && result.map((sponsor:Sponsor,index:number)=>
            ({label: sponsor.name, value: sponsor.name})
          
        )}

     >
       </VirtualizedSelect>

反应中的可搜索下拉列表

searchable dropdown in react

javascript

reactjs

react-select

react-virtualized

react-hooks