reactjs 隐藏/删除React选择中的“新建”菜单

piok6c0g  于 2023-01-08  发布在  React
关注(0)|答案(7)|浏览(158)

我正在使用creatable选择哪里我想到隐藏“新建”菜单选项.这里是我的CodeSandbox
我试过跟踪但没成功
第一个月

谢谢你,感谢你的帮助

gzszwxb4

gzszwxb41#

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

qojgxg4l2#

禁用通过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}
        ...
      />

现场演示

b4qexyjb

b4qexyjb3#

如果您希望始终隐藏创建新值消息,同时仍然能够创建新值,则必须在定义CreatableSelect时使用属性formatCreateLabel,如下所示。

cnjp1d6j

cnjp1d6j4#

只需添加这些 prop :
menuIsOpen={false}components={{ DropdownIndicator: null }}
然后按照=〉https://react-select.com/creatable中的说明处理onKeyDownonInputChange事件,请查看"多选文本输入"部分
下面是完整的示例:

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

izj3ouym5#

只要加上

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

cngwdvgl6#

只要将所有新选项视为无效,就会显示“No options”(无选项)消息:

<CreatableSelect isValidNewOption={() => false}/>
ncecgwcz

ncecgwcz7#

您可能希望向用户显示“创建”选项,但如果元素存在或任何其他原因,则应隐藏“创建”选项。
失效日期:

options=[
          {label:"A - 1",value:"A"},
          {label:"B - 1",value:"B"}
          {label:"C - 1",value:"C"}
          {label:"D - 1",value:"D"}
        ]

在我的示例中,用户只能***创建A、B、C、D***,但我已格式化了他们的输入,使标签***看起来像“A - 1”、“B - 1”等***。现在,如果用户再次输入***A、B、C或D,将与“A - 1”不匹配,或“B - 1”或“C - 1”或“D - 1”***,在这种情况下,我希望***隐藏“创建”***选项,因为我已经接受该值,但格式不同。
所以我的逻辑应该是

<CreatableSelect
  name="options"
  options={options}
  placeholder="Select or Create"
  isSearchable
  onChange={(option) => appendLabel(option.value)}
  value={null}
  isValidNewOption={(inputValue)=>
  (options.filter((lab)=>lab?.label?.split(" — ") 
 [0].trim().toLowerCase()===inputValue.toLowerCase()).length>0?false:`Create ${inputValue}`}
/>

相关问题