當(dāng)選項(xiàng)過(guò)多時(shí),使用下拉菜單展示并選擇內(nèi)容。
適用廣泛的基礎(chǔ)單選
value
的值為當(dāng)前被選中的Option
的 value 屬性值
constructor(props) {
super(props);
this.state = {
options: [{
value: '選項(xiàng)1',
label: '黃金糕'
}, {
value: '選項(xiàng)2',
label: '雙皮奶'
}, {
value: '選項(xiàng)3',
label: '蚵仔煎'
}, {
value: '選項(xiàng)4',
label: '龍須面'
}, {
value: '選項(xiàng)5',
label: '北京烤鴨'
}],
value: ''
};
}
render() {
return (
<Select value={this.state.value} placeholder="請(qǐng)選擇">
{
this.state.options.map(el => {
return <Select.Option key={el.value} label={el.label} value={el.value} />
})
}
</Select>
)
}
在Option
中,設(shè)定disabled
值為 true,即可禁用該選項(xiàng)
constructor(props) {
super(props);
this.state = {
options: [{
value: '選項(xiàng)1',
label: '黃金糕'
}, {
value: '選項(xiàng)2',
label: '雙皮奶',
disabled: true
}, {
value: '選項(xiàng)3',
label: '蚵仔煎'
}, {
value: '選項(xiàng)4',
label: '龍須面'
}, {
value: '選項(xiàng)5',
label: '北京烤鴨'
}],
value: ''
};
}
render() {
return (
<Select value={this.state.value}>
{
this.state.options.map(el => {
return <Select.Option key={el.value} label={el.label} value={el.value} disabled={el.disabled} />
})
}
</Select>
)
}
選擇器不可用狀態(tài)
為Select
設(shè)置disabled
屬性,則整個(gè)選擇器不可用
constructor(props) {
super(props);
this.state = {
options: [{
value: '選項(xiàng)1',
label: '黃金糕'
}, {
value: '選項(xiàng)2',
label: '雙皮奶'
}, {
value: '選項(xiàng)3',
label: '蚵仔煎'
}, {
value: '選項(xiàng)4',
label: '龍須面'
}, {
value: '選項(xiàng)5',
label: '北京烤鴨'
}],
value: ''
};
}
render() {
return (
<Select value={this.state.value} disabled={true}>
{
this.state.options.map(el => {
return <Select.Option key={el.value} label={el.label} value={el.value} />
})
}
</Select>
)
}
包含清空按鈕,可將選擇器清空為初始狀態(tài)
為Select
設(shè)置clearable
屬性,則可將選擇器清空。需要注意的是,clearable
屬性?xún)H適用于單選。
constructor(props) {
super(props);
this.state = {
options: [{
value: '選項(xiàng)1',
label: '黃金糕'
}, {
value: '選項(xiàng)2',
label: '雙皮奶'
}, {
value: '選項(xiàng)3',
label: '蚵仔煎'
}, {
value: '選項(xiàng)4',
label: '龍須面'
}, {
value: '選項(xiàng)5',
label: '北京烤鴨'
}],
value: ''
};
}
render() {
return (
<Select value={this.state.value} clearable={true}>
{
this.state.options.map(el => {
return <Select.Option key={el.value} label={el.label} value={el.value} />
})
}
</Select>
)
}
適用性較廣的基礎(chǔ)多選,用 Tag 展示已選項(xiàng)
為Select
設(shè)置multiple
屬性即可啟用多選,此時(shí)value
的值為當(dāng)前選中值所組成的數(shù)組
constructor(props) {
super(props);
this.state = {
options: [{
value: '選項(xiàng)1',
label: '黃金糕'
}, {
value: '選項(xiàng)2',
label: '雙皮奶'
}, {
value: '選項(xiàng)3',
label: '蚵仔煎'
}, {
value: '選項(xiàng)4',
label: '龍須面'
}, {
value: '選項(xiàng)5',
label: '北京烤鴨'
}],
value: []
};
}
render() {
return (
<Select value={this.state.value} multiple={true}>
{
this.state.options.map(el => {
return <Select.Option key={el.value} label={el.label} value={el.value} />
})
}
</Select>
)
}
可以自定義備選項(xiàng)
將自定義的 HTML 模板插入Option
中即可。
constructor(props) {
super(props);
this.state = {
cities: [{
value: 'Beijing',
label: '北京'
}, {
value: 'Shanghai',
label: '上海'
}, {
value: 'Nanjing',
label: '南京'
}, {
value: 'Chengdu',
label: '成都'
}, {
value: 'Shenzhen',
label: '深圳'
}, {
value: 'Guangzhou',
label: '廣州'
}],
value: []
};
}
render() {
return (
<Select value={this.state.value}>
{
this.state.cities.map(el => {
return (
<Select.Option key={el.value} label={el.label} value={el.value}>
<span style={{float: 'left'}}>{el.label}</span>
<span style={{float: 'right', color: '#8492a6', fontSize: 13}}>{el.value}</span>
</Select.Option>
)
})
}
</Select>
)
}
備選項(xiàng)進(jìn)行分組展示
使用OptionGroup
對(duì)備選項(xiàng)進(jìn)行分組,它的label
屬性為分組名
constructor(props) {
super(props);
this.state = {
options: [{
label: '熱門(mén)城市',
options: [{
value: 'Shanghai',
label: '上海'
}, {
value: 'Beijing',
label: '北京'
}]
}, {
label: '城市名',
options: [{
value: 'Chengdu',
label: '成都'
}, {
value: 'Shenzhen',
label: '深圳'
}, {
value: 'Guangzhou',
label: '廣州'
}, {
value: 'Dalian',
label: '大連'
}]
}],
value: ''
};
}
render() {
return (
<Select value={this.state.value}>
{
this.state.options.map(group => {
return (
<Select.OptionGroup key={group.label} label={group.label}>
{
group.options.map(el => {
return (
<Select.Option key={el.value} label={el.label} value={el.value}>
<span style={{float: 'left'}}>{el.label}</span>
<span style={{float: 'right', color: '#8492a6', fontSize: 13}}>{el.value}</span>
</Select.Option>
)
})
}
</Select.OptionGroup>
)
})
}
</Select>
)
}
可以利用搜索功能快速查找選項(xiàng)
為Select
添加filterable
屬性即可啟用搜索功能。默認(rèn)情況下,Select 會(huì)找出所有label
屬性包含輸入值的選項(xiàng)。如果希望使用其他的搜索邏輯,可以通過(guò)傳入一個(gè)filterMethod
來(lái)實(shí)現(xiàn)。filterMethod
為一個(gè)Function
,它會(huì)在輸入值發(fā)生變化時(shí)調(diào)用,參數(shù)為當(dāng)前輸入值。
constructor(props) {
super(props);
this.state = {
options: [{
value: '選項(xiàng)1',
label: '黃金糕'
}, {
value: '選項(xiàng)2',
label: '雙皮奶'
}, {
value: '選項(xiàng)3',
label: '蚵仔煎'
}, {
value: '選項(xiàng)4',
label: '龍須面'
}, {
value: '選項(xiàng)5',
label: '北京烤鴨'
}],
value: []
};
}
render() {
return (
<Select value={this.state.value} filterable={true}>
{
this.state.options.map(el => {
return <Select.Option key={el.value} label={el.label} value={el.value} />
})
}
</Select>
)
}
從服務(wù)器搜索數(shù)據(jù),輸入關(guān)鍵字進(jìn)行查找
為了啟用遠(yuǎn)程搜索,需要將filterable
和remote
設(shè)置為true
,同時(shí)傳入一個(gè)remoteMethod
。remoteMethod
為一個(gè)Function
,它會(huì)在輸入值發(fā)生變化時(shí)調(diào)用,參數(shù)為當(dāng)前輸入值。
constructor(props) {
super(props);
this.state = {
options: [],
states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas",
"Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
}
}
onSearch(query) {
if (query !== '') {
this.setState({
loading: true
});
setTimeout(() => {
this.setState({
loading: false,
options: this.state.states.map(item => {
return { value: item, label: item };
}).filter(item => {
return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
})
});
}, 200);
} else {
this.setState({
options: []
});
}
}
render() {
return (
<Select value={this.state.value} multiple={true} filterable={true} remote={true} remoteMethod={this.onSearch.bind(this)} loading={this.state.loading}>
{
this.state.options.map(el => {
return <Select.Option key={el.value} label={el.label} value={el.value} />
})
}
</Select>
)
}
參數(shù) | 說(shuō)明 | 類(lèi)型 | 可選值 | 默認(rèn)值 |
---|---|---|---|---|
multiple | 是否多選 | boolean | — | false |
disabled | 是否禁用 | boolean | — | false |
clearable | 單選時(shí)是否可以清空選項(xiàng) | boolean | — | false |
name | select input 的 name 屬性 | string | — | — |
placeholder | 占位符 | string | — | 請(qǐng)選擇 |
filterable | 是否可搜索 | boolean | — | false |
filterMethod | 自定義過(guò)濾方法 | function | — | — |
remote | 是否為遠(yuǎn)程搜索 | boolean | — | false |
remoteMethod | 遠(yuǎn)程搜索方法 | function | — | — |
loading | 是否正在從遠(yuǎn)程獲取數(shù)據(jù) | boolean | — | false |
事件名稱(chēng) | 說(shuō)明 | 回調(diào)參數(shù) |
---|---|---|
onChange | 選中值發(fā)生變化時(shí)觸發(fā) | 目前的選中值 |
onVisibleChange | 下拉框出現(xiàn)/隱藏時(shí)觸發(fā) | 出現(xiàn)則為 true,隱藏則為 false |
onRemoveTag | 多選模式下移除tag時(shí)觸發(fā) | 移除的tag值 |
onClear | 可清空的單選模式下用戶(hù)點(diǎn)擊清空按鈕時(shí)觸發(fā) | - |
參數(shù) | 說(shuō)明 | 類(lèi)型 | 可選值 | 默認(rèn)值 |
---|---|---|---|---|
label | 分組的組名 | string | — | — |
disabled | 是否將該分組下所有選項(xiàng)置為禁用 | boolean | — | false |
參數(shù) | 說(shuō)明 | 類(lèi)型 | 可選值 | 默認(rèn)值 |
---|---|---|---|---|
value | 選項(xiàng)的值 | string/number/object | — | — |
label | 選項(xiàng)的標(biāo)簽,若不設(shè)置則默認(rèn)與 value 相同 |
string/number | — | — |
disabled | 是否禁用該選項(xiàng) | boolean | — | false |
更多建議: