我正在使用creatable select来隐藏“创建新”菜单选项。这是我的
CodeSandbox
我尝试关注但没有运气
promptTextCreator={() => false}
答案 0 :(得分:1)
通过formatCreateLabel={() => undefined}
禁用创建标签是正确的方向,但是菜单列表窗台显示的是空白,而不是完全不显示,这是您所希望的。
在没有选项的情况下,您可能希望通过将菜单列表显示设置为none
// 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}
...
/>
答案 1 :(得分:0)
如果您想始终隐藏创建新值的消息,同时仍然能够创建新值,则在定义{{1时,必须使用formatCreateLabel
这样的道具formatCreateLabel={() => undefined}
}}。
答案 2 :(得分:0)
// try this way
return (
<CreatableSelect
isClearable
onChange={this.handleChange}
onInputChange={this.handleInputChange}
options={colourOptions}
noOptionsMessage={() => null}
// isValidNewOption={() => true}
// or `isValidNewOption={() => false}`
promptTextCreator={() => false}
/>
);
答案 3 :(得分:0)
只需添加这些道具:
menuIsOpen={false}
和 components={{ DropdownIndicator: null }}
然后按照 => https://react-select.com/creatable 中的说明处理 onKeyDown
和 onInputChange
事件,查看“多选文本输入”部分
以下是完整示例:
import React, { Component } from 'react';
import CreatableSelect from 'react-select/creatable';
const components = {
DropdownIndicator: null,
};
const createOption = (label: string) => ({
label,
value: label,
});
export default class CreatableInputOnly extends Component<*, State> {
state = {
inputValue: '',
value: [],
};
handleChange = (value: any, actionMeta: any) => {
this.setState({ value });
};
handleInputChange = (inputValue: string) => {
this.setState({ inputValue });
};
handleKeyDown = (event: SyntheticKeyboardEvent<HTMLElement>) => {
const { inputValue, value } = this.state;
if (!inputValue) return;
switch (event.key) {
case 'Enter':
case 'Tab':
this.setState({
inputValue: '',
value: [...value, createOption(inputValue)],
});
event.preventDefault();
}
};
render() {
const { inputValue, value } = this.state;
return (
<CreatableSelect
components={components}
inputValue={inputValue}
isClearable
isMulti
menuIsOpen={false}
onChange={this.handleChange}
onInputChange={this.handleInputChange}
onKeyDown={this.handleKeyDown}
placeholder="Type something and press enter..."
value={value}
/>
);
}
}
答案 4 :(得分:0)
只需添加
<CreatableSelect
components={{
...components,
Menu: () => null
}}
/>