我怎样才能在我的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属性的逻辑。

react-multi-select-component

从我的角度来看，如果你想使用单一选择，我宁愿使用多选择库使其成为单一选择，相反，我会寻找一些库，使我的工作更容易。

Answer 2

MultiSelect react下拉菜单允许您通过添加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>
);
}