Reactjs 在react select中隐藏/删除“新建”菜单

我正在使用可创建选择我要隐藏的位置创建新菜单选项。这是我的 我尝试了以下操作，但没有成功promptTextCreator={=>false}

---

感谢您并感谢您提供的帮助如果您想在始终隐藏创建新值消息的同时仍然能够创建新值，那么在定义CreatableSelect时，您必须按如下方式使用prop formatCreateLabel={=>undefined}。

通过formatCreateLabel={=>undefined}禁用创建标签是正确的方向，但菜单列表显示空白，而不是完全不显示您可能更喜欢的内容

当没有选项时，您可能希望通过将“菜单列表显示”设置为“无”来完全隐藏菜单列表

现场演示 只需添加以下道具：

menuIsOpen={false}和components={{DropdownIndicator:null}

然后处理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}
      />
    );
  }
}

---

如果您不想使用可创建选项，为什么要使用可创建选择？也许他想通过按enter键而不是单击“创建新值”消息来创建新值。@frangaren正确……有任何答案对您有效吗？如果是这样，请标记它。对我来说，isValidNewOption和nooptions消息完成了任务：+1:这个把戏不雅观也不简单。看看我的答案，简单而优雅的解决方案

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

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