javascript - React-Select Creatable hide only create new.. 消息

Question

我可以在使用 React-Select Creatable 时隐藏下拉菜单中的仅创建新选项吗？我想像往常一样展示其他建议，并希望保留创建新标签的可创建功能。只是不想显示用户在下拉菜单中输入的内容。

编辑:为 React-Select 添加示例代码:

import React, { Component } from 'react';

import CreatableSelect from 'react-select/lib/Creatable';
const colourOptions = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
]


export default class CreatableMulti extends Component<*, State> {
  handleChange = (newValue: any, actionMeta: any) => {
    console.group('Value Changed');
    console.log(newValue);
    console.log(`action: ${actionMeta.action}`);
    console.groupEnd();
  };

  formatCreate = (inputValue) => {
    return (<p> Add: {inputValue}</p>); 
  };

  render() {
    return (
      <CreatableSelect
        isMulti
        onChange={this.handleChange}
        options={colourOptions}
        formatCreateLabel={this.formatCreate}
        createOptionPosition={"first"}
      />
    );
  }
}

这里还有一个沙箱链接:https://codesandbox.io/s/wqm0z1wlxl

当您键入“我想要”时，它会显示“添加:”以及所有其他已过滤的建议。我想从中删除添加部分以保留其余功能。

希望这对现在有所帮助。

Answer 1

如果您想替换选项 Add: myValue，您可以在 CreatableSelect 中使用 Prop formatCreateLabel，如下所示:

formatCreateLabel={() => `Add`}

Here a live example将前面的代码应用于您给出的示例。 可以查阅文档权here了解这个特定 Prop 的行为。