如何将用户输入的文本添加到常量列表中

Question

在MUI自动完成组件中，我希望当用户输入一些文本时，我们的系统可以将其保存到列表中，并在用户下次点击时加载列表。

<Autocomplete
id="free-solo-demo"
freeSolo
options={top100Films.map((option) => option.title)}
renderInput={(params) => <TextField {...params} label="freeSolo" />}
/>

现在，免费独奏开始了。用户可以输入他们想要的任何文本。我们如何将这些添加到列表中？

Answer 1

这里有一种方法：

每当用户键入内容时，显示匹配项以及用户键入的内容。

如果用户单击他们键入的选项，或按enter键，而选项中不包含用户键入的内容，请将其添加到选项列表中，并将其设置为选中。

这里是一个实现这一点的最小代码沙盒，或者，这里是一种能够处理多选的更完整的示例

import { useState } from "react";
import { Autocomplete, TextField } from "@mui/material";
function App() {
const [options, setOptions] = useState<string[]>([
"option 1",
"option 2",
"option 3",
"option 4",
"option 5",
]);
return (
<TokenizingAutocomplete
autocompleteProps={{
id: "tokenizing-demo",
//multiple: true,
}}
options={options}
addOption={(option) => {
setOptions(options.concat(option));
}}
/>
);
}
interface TokenizingAutocompleteProps {
options: string[];
addOption: (option: string) => void;
autocompleteProps?: any;
}
function TokenizingAutocomplete(props: TokenizingAutocompleteProps) {
const { options, addOption, autocompleteProps } = props;
const [currentText, setCurrentText] = useState<string>("");
return (
<Autocomplete
{...autocompleteProps}
// by default show the options and whatever the user has typed, if what they have typed is not in the list of options
options={
options.includes(currentText) ? options : options.concat(currentText)
}
renderInput={(params) => (
<TextField
{...params}
label="Options"
// if the user types something that is not in the list of options add it to the list of options
onChange={(e) => {
setCurrentText(e.target.value);
}}
// if the user presses enter and what they have typed is not in the list of options add it to the list of options
onKeyDown={(e) => {
if (e.key === "Enter" && !options.includes(currentText)) {
addOption(currentText);
}
}}
/>
)}
// if the user selects the option, permanantly add it to the list of options. do not add it if it is already in the list of options, or selection type is multiple
onChange={(e, value: string) => {
if (value && !options.includes(value) && !autocompleteProps?.multiple) {
addOption(value);
}
}}
/>
);
}
export default App;

Answer 2

您可以通过可创建的自动完成示例获得一些想法。

1. filterOptions：追加用户键入的选项项
2. getOptionLabel：为新项目添加前缀
3. 在CCD_ 3内部切换以用新项目设置CCD_

<Autocomplete
value={value}
onChange={(event, newValue) => {
if (typeof newValue === 'string') {
setValue({
title: newValue,
});
} else if (newValue && newValue.inputValue) {
// Create a new value from the user input
setValue({
title: newValue.inputValue,
});
} else {
setValue(newValue);
}
}}
filterOptions={(options, params) => {
const filtered = filter(options, params);
const { inputValue } = params;
// Suggest the creation of a new value
const isExisting = options.some((option) => inputValue === option.title);
if (inputValue !== '' && !isExisting) {
filtered.push({
inputValue,
title: `Add "${inputValue}"`,
});
}
return filtered;
}}
selectOnFocus
clearOnBlur
handleHomeEndKeys
id="free-solo-with-text-demo"
options={top100Films}
getOptionLabel={(option) => {
// Value selected with enter, right from the input
if (typeof option === 'string') {
return option;
}
// Add "xxx" option created dynamically
if (option.inputValue) {
return option.inputValue;
}
// Regular option
return option.title;
}}
renderOption={(props, option) => <li {...props}>{option.title}</li>}
sx={{ width: 300 }}
freeSolo
renderInput={(params) => (
<TextField {...params} label="Free solo with text demo" />
)}
/>