// Remember to define a unique id for your component in the constructor
// so you can target the right menu list element to hide it
id = "";
constructor(props) {
super(props);
this.id = "react-select_" + Math.random().toFixed(8).slice(2);
}
handleInputChange = (inputValue: any, actionMeta: any) => {
setTimeout(() => {
const menuEl = document.querySelector(`#${this.id} [class*="-menu"]`);
const menuListEl = document.querySelector(
`#${this.id} [class*="MenuList"]`
);
if (
menuListEl.children.length === 1 &&
menuListEl.children[0].innerHTML === ""
) {
menuEl.style.display = "none";
} else {
menuEl.style.display = "block";
}
});
};
...
<CreatableSelect
id={this.id}
onInputChange={this.handleInputChange}
formatCreateLabel={() => undefined}
...
/>
7条答案
按热度按时间gzszwxb41#
qojgxg4l2#
禁用通过
formatCreateLabel={() => undefined}
创建标签是正确的方向,但菜单列表仍然显示空白空间,而不是根本不显示,这可能是你喜欢的。当没有选项时,您可能希望通过将菜单列表显示设置为
none
来完全隐藏菜单列表现场演示
b4qexyjb3#
如果您希望始终隐藏创建新值消息,同时仍然能够创建新值,则必须在定义
CreatableSelect
时使用属性formatCreateLabel
,如下所示。cnjp1d6j4#
只需添加这些 prop :
menuIsOpen={false}
和components={{ DropdownIndicator: null }}
然后按照=〉https://react-select.com/creatable中的说明处理
onKeyDown
和onInputChange
事件,请查看"多选文本输入"部分下面是完整的示例:
izj3ouym5#
只要加上
cngwdvgl6#
只要将所有新选项视为无效,就会显示“No options”(无选项)消息:
ncecgwcz7#
您可能希望向用户显示“创建”选项,但如果元素存在或任何其他原因,则应隐藏“创建”选项。
失效日期:
在我的示例中,用户只能***创建A、B、C、D***,但我已格式化了他们的输入,使标签***看起来像“A - 1”、“B - 1”等***。现在,如果用户再次输入***A、B、C或D,将与“A - 1”不匹配,或“B - 1”或“C - 1”或“D - 1”***,在这种情况下,我希望***隐藏“创建”***选项,因为我已经接受该值,但格式不同。
所以我的逻辑应该是