1 回答

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超7個(gè)贊
import React, { Component } from 'react'
import Select from 'react-select'
export default class App extends Component {
state = {
selectedValue:null
}
data = [
{
label: 'john',
value: 'John Doe',
},
{
label: 'jane',
value: 'Jane Doe',
},
{
label: 'mary',
value: 'Mary Phillips',
},
{
label: 'robert',
value: 'Robert',
},
{
label: 'karius',
value: 'Karius',
},
]
render() {
return (
<Select
options={this.data}
isSearchable
value={this.state.selectedValue}
onChange={this.handleChange}
/>
)
}
}
如果您想顯示帶有搜索選項(xiàng)的下拉菜單,我建議您使用 react-select 庫(kù)。但是,您的數(shù)據(jù)應(yīng)該采用像 {label:' ',value:' '} 這樣的對(duì)象形式。這個(gè)組件有一個(gè) isSearchable 屬性,它允許我們搜索下拉菜單以及手動(dòng)選擇一個(gè)選項(xiàng)。希望這可以幫助!
添加回答
舉報(bào)