React-Select Creatable hide only create new.. message



当使用React Select Creatable时,我可以从下拉列表中仅隐藏创建新选项吗。我想像往常一样展示其他建议,并希望保留创建新标签的可创建功能。只是不想显示用户在下拉菜单中键入的内容。

编辑:添加React Select:的示例代码

import React, { Component } from 'react';
import CreatableSelect from 'react-select/lib/Creatable';
const colourOptions = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
]

export default class CreatableMulti extends Component<*, State> {
handleChange = (newValue: any, actionMeta: any) => {
console.group('Value Changed');
console.log(newValue);
console.log(`action: ${actionMeta.action}`);
console.groupEnd();
};
formatCreate = (inputValue) => {
return (<p> Add: {inputValue}</p>); 
};
render() {
return (
<CreatableSelect
isMulti
onChange={this.handleChange}
options={colourOptions}
formatCreateLabel={this.formatCreate}
createOptionPosition={"first"}
/>
);
}
}

这里还有一个沙箱链接:https://codesandbox.io/s/wqm0z1wlxl

当您键入"我想要"时,它会显示一个Add:以及所有其他已筛选的建议。我想从中删除添加部分,保留其余功能。

希望现在能有所帮助。

如果您想替换选项Add: myValue,您可以在CreatableSelect中使用道具formatCreateLabel,如下所示:

formatCreateLabel={() => `Add`}

这里是一个实际的例子,上面的代码应用于您给出的例子。您可以查阅这里的文档来了解这个特定道具的行为。

相关内容

最新更新