Question

我正在使用creatable select来隐藏“创建新”菜单选项。这是我的 CodeSandbox
我尝试关注但没有运气
promptTextCreator={() => false}

谢谢你，谢谢你的帮助

Answer 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}
        ...
      />

实时演示

Answer 2

如果您想始终隐藏创建新值的消息，同时仍然能够创建新值，则在定义{{1时，必须使用formatCreateLabel这样的道具formatCreateLabel={() => undefined} }}。

Answer 3

// try this way
return (
      <CreatableSelect
        isClearable
        onChange={this.handleChange}
        onInputChange={this.handleInputChange}
        options={colourOptions}
        noOptionsMessage={() => null}
        // isValidNewOption={() => true}
        // or `isValidNewOption={() => false}`
        promptTextCreator={() => false}
      />
    );

Answer 4

只需添加这些道具：

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}
      />
    );
  }
}

Answer 5

只需添加

 <CreatableSelect
  components={{
    ...components,
    Menu: () => null
  }}
/>

在反应选择中隐藏/删除“新建”菜单

5 个答案:

实时演示