React:如何创建一个接受相同值的选择多个输入

Question

我使用antd库和reactJS。我希望用户能够在select multiple input语句中输入多个值，并且用户可以一次输入相同的值。比如:[20,100,100]。当前在正常的多或标签模式下，当用户输入另一个已经存在的输入时，该输入将被删除。基本上，我想把它留在那里。这些是我从antd文档中得到的代码:

const children = [];
function handleChange(value) {
console.log(`selected ${value}`);
}
ReactDOM.render(
<Select mode="tags" style={{ width: '100%' }} placeholder="Tags Mode" onChange={handleChange}>
{children}
</Select>,
document.getElementById('container'),
);

I have try:

1. 为所选的每个值设置唯一键。但是我发现修改用户当前选择的选项有困难。没有提供API，我可以使用它来更新当前选项。

2. 当用户选择该选项时，通过在键后面附加Date.now()来设置唯一的键。但是，我不确定如何在select props上做到这一点。像这样:

ReactDOM.render(
<Select
mode="tags"
style={{ width: "100%" }}
placeholder="Tags Mode"
onChange={handleChange}
value={Date.now() + '' + selectedValue}
>
{children}
</Select>

但是，selectedValue不是我可以使用的有效变量。

3. 我尝试添加labelInValue，但它只是添加了id和value，没有选项来自定义id。

Answer 1

注意:这个解决方案只解决了当我们在选择中有一个标签并且您尝试添加相同的标签时，它不会从andd select中删除现有的选定标签的问题。

import { Select } from "antd";
import { useState } from "react";
function App() {
const [value, setValue] = useState([]);
const [searchValue, setSearchValue] = useState("");
// const [options, setOptions] = useState([]);
const onSelect = (value) => {
setValue((prev) => [...prev, value]);
setSearchValue("");
// If you want to show tags after user added removes it, you can enable this code
// Enable options and setOptions
// setOptions((prev) => {
//   const index = prev.find((o) => o.value === value);
//   if (!index) {
//     return [...prev, { label: value, value }];
//   }
//   return prev;
// });
};
const onDeselect = (value) => {
if (value !== searchValue) {
setValue((prev) => prev.filter((v) => v !== value));
}
setSearchValue("");
};
return (
<div className='App'>
<Select
// options={options}
mode='tags'
searchValue={searchValue}
onSearch={setSearchValue}
value={value}
style={{ width: "100%" }}
placeholder='Tags Mode'
onSelect={onSelect}
onDeselect={onDeselect}
/>
</div>
);
}
export default App;