![中搜索时没有剩余]( "中搜索时没有剩余")
本文介绍了如果在 React-Select v2 中搜索时没有剩余，如何创建新选项?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如果没有选项，我需要在过滤时创建带有标签Ostatni"的新选项.我尝试通过自定义 MenuList 和 NoOptionsMessage 来做到这一点，但没有任何效果.有什么办法吗?
NoOptionsMessage = props =>(<components.NoOptionsMessage{...道具}children={<components.Option {...components.Option.defaultProps} data={{ value: 37, label: 'Ostatni' }}/>}/>)
解决方案
你可以使用 filterOption 函数实现你的目标，如下代码:
class App 扩展 React.Component {构造函数(道具){超级(道具)；this.state = {hasExtraValue:假，选项: [{标签:标签1"，值:1}，{ 标签:标签 2"，值:2 }，{ 标签:标签 3"，值:3 }，{ 标签:标签 4"，值:4 }，{ 标签:标签 5"，值:5 }，{ 标签:标签 6"，值:6 }，{ 标签:标签 7"，值:7 }，{ 标签:标签 8"，值:8 }，{标签:'Ostatni'，值:'其他'}]};}filterOption = (option, inputValue) =>{//调整 filterOption 以仅在没有其他选项匹配时呈现 Ostatni + 将 hasExtraValue 设置为 true 以防您想显示消息if (option.label === "Ostatni"){const {options} = this.stateconst 结果 = options.filter(opt => opt.label.includes(inputValue))this.setState({ hasExtraValue: !result.length})返回 !result.length};返回 option.label.includes(inputValue);};使成为() {返回 (<div>没有更多选择"}选项={this.state.options}/>//显示一条用户友好的消息来解释情况{this.state.hasExtraValue &&<p>如果您没有找到您的选项，请选择Ostatni"选项！</p>}
);}}
这个想法是在用户输入内容时触发.如果没有可用选项，您可以添加一个新的标签，为用户提供一个新选项.
在 filterOption 中，您将此特殊选项设置为始终 true，因此如果存在，它将始终显示.
这是一个活生生的例子.
I need to create new option with label "Ostatni" while filtering if there are no options left. I tried to do it by customising MenuList and NoOptionsMessage, but nothing works. Is there any way?
NoOptionsMessage = props => (
<components.NoOptionsMessage
{...props}
children={<components.Option {...components.Option.defaultProps} data={{ value: 37, label: 'Ostatni' }} />}
/>
)
解决方案
You can achieve your goal using filterOption function like the following code:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
hasExtraValue: false,
options: [
{ label: "Label 1", value: 1 },
{ label: "Label 2", value: 2 },
{ label: "Label 3", value: 3 },
{ label: "Label 4", value: 4 },
{ label: "Label 5", value: 5 },
{ label: "Label 6", value: 6 },
{ label: "Label 7", value: 7 },
{ label: "Label 8", value: 8 },
{label: 'Ostatni', value: 'other'}
]
};
}
filterOption = (option, inputValue) => {
// tweak the filterOption to render Ostatni only if there's no other option matching + set hasExtraValue to true in case you want to display an message
if (option.label === "Ostatni"){
const {options} = this.state
const result = options.filter(opt => opt.label.includes(inputValue))
this.setState({ hasExtraValue: !result.length})
return !result.length
};
return option.label.includes(inputValue);
};
render() {
return (
<div>
<Select
isMulti
filterOption={this.filterOption}
noOptionsMessage={() => "No more options"}
options={this.state.options}
/>
// Displays a user friendly message to explain the situation
{this.state.hasExtraValue && <p>Please select 'Ostatni' option if you don't find your option !</p>}
</div>
);
}
}
The idea is to trigger when the user is typing something. If there's no options available you add a new one the desired label to offer the user a new option.
In filterOption you set this special option to be always true so it will always displayed if it exists.
Here a live example.
这篇关于如果在 React-Select v2 中搜索时没有剩余，如何创建新选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！