仅显示多选中的前 5 个选项

Question

我有一个多项选择，我希望当我必须选择选项时只能看到前 5 个选项，具体取决于我写的内容，但我不知道该怎么做

这是我的代码：

import React from "react";
import ReactDOM from "react-dom";
import Creatable from "react-select/lib/Creatable";
import { components } from "react-select";

import "./styles.css";

const options = [
  {
    label: "option 1",
    value: 1
  },
  {
    label: "option 2",
    value: 2
  },
  {
    label: "option 3",
    value: 3
  },
  {
    label: "option 4",
    value: 4
  },
  {
    label: "option 5",
    value: 5
  },
  {
    label: "option 6",
    value: 6
  },
  {
    label: "option 7",
    value: 7
  }
];

function App() {
  return (
    <div className="App">
      <Creatable
        isMulti
        options={options}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我有什么：

我想要什么：

我怎样才能做到这一点？

非常感谢！

Answer 1

options={options.slice(0,5)}

或

let newOptions=options.slice(0,5)
...
...
options={newOptions}

Answer 2

您只能通过更改自定义搜索选项来实现此目的。您可以使用

onInputChange

方法。