如何在我的 react-multi-select-component 中只选择一个项目？

Question

我只想在我的 react-multi-select-component 中选择一个选项。通常我使用其他库

isOptionDisabled

但对于那个库，属性无效。

这是我的代码：

import React, { useState } from "react";
import ReactDOM from "react-dom";
import MultiSelect from "react-multi-select-component";
import "./styles.css";

const App = () => {
  const options = [
    { label: "Grapes 🍇", value: "grapes" },
    { label: "Mango 🥭", value: "mango" },
    { label: "Strawberry 🍓", value: "strawberry" }
  ];

  const [selected, setSelected] = useState([]);

  return (
    <div>
      <MultiSelect
        options={options}
        selected={selected}
        onChange={setSelected}
        labelledBy={"Select"}
      />
    </div>
  );
};

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

项目在那里：

https://codesandbox.io/s/react-multi-select-component-example-forked-9xjdpr?file=/src/index.js:0-666

我的问题是我可以选择多个选项，但我想仅限于选择其中一个。

非常感谢您的帮助！

Answer 1

正如我刚刚从 react-multi-select-component 的 npm 文档中看到的，您可以添加属性 hasSelectAll 并将值设置为 false。 第一步之后，我通过 API 找到的唯一方法是添加一个具有 isCreatable 属性的逻辑。

反应多选组件

从我的角度来看，如果您想使用单选，我宁愿使用多选库来使其成为单选，而是寻找一些使我的工作更轻松的库。

Answer 2

MultiSelect 反应下拉让您通过添加

selectionLimit={SELECTION_LIMIT}

添加选择限制

所以你必须这样添加它：

<MultiSelect
   selectionLimit={1}
   options={options}
   selected={selected}
   onChange={setSelected}
   labelledBy={"Select"}
/>

资源

• 有关选择限制的更多信息请看这里

• 您还可以从官方页面这里看到其他有用的选项

Answer 3

其实很简单。只需在

selected

值传回组件之前截断它们。像这样的简单功能应该是开箱即用的。

import React, { useState } from "react";
import { MultiSelect } from "react-multi-select-component";
import "./styles.css";

export default function App() {
  const options = [
    { label: "Grapes 🍇", value: "grapes" },
    { label: "Mango 🥭", value: "mango" },
    { label: "Strawberry 🍓", value: "strawberry" },
    { label: "Watermelon 🍉", value: "watermelon" },
    { label: "Pear 🍐", value: "pear", disabled: true },
    { label: "Apple 🍎", value: "apple" },
    { label: "Tangerine 🍊", value: "tangerine" },
    { label: "Pineapple 🍍", value: "pineapple" },
    { label: "Peach 🍑", value: "peach" }
  ];

  let [selected, setSelected] = useState([]);

  if (selected.length > 1) {
    selected = selected.slice(1);
  }

  return (
    <div>
      <h1>Select Fruits</h1>
      <MultiSelect
        options={options}
        value={selected}
        onChange={setSelected}
        labelledBy={"Select"}
        isCreatable={true}
        hasSelectAll={false}
      />
    </div>
  );
}