Material ui Autocomplete Drücken Sie die Eingabetaste, um neue Chips zu erstellen

Ich wünschte, ich könnte so etwas mit Autocomplete of material ui: wertarbyte machen

Das heißt, Text (String) einfügen, ohne eine Liste von Elementen zu haben, aus denen Sie auswählen müssen.

Daher sollte die noOptions-Meldung nicht erscheinen, jedes Mal, wenn die Eingabetaste auf der Tastatur gedrückt wird, wird der Text eingefügt.

Link: Codesandbox

Code:

import React from "react";
import Chip from "@material-ui/core/Chip";
import Autocomplete from "@material-ui/lab/Autocomplete";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
const useStyles = makeStyles(theme => ({
 root: {
 width: 500,
 "& > * + *": {
 marginTop: theme.spacing(3)
 }
 }
}));
export default function Tags() {
 const classes = useStyles();
 return (
 <div className={classes.root}>
 <Autocomplete
 multiple
 id="tags-outlined"
 options={[]}
 defaultValue={["foo", "bar"]}
 //getOptionLabel={(option) => option}
 //defaultValue={[top100Films[13]]}
 //filterSelectedOptions
 renderInput={params => (
 <TextField
 {...params}
 variant="outlined"
 label="filterSelectedOptions"
 placeholder="Favorites"
 />
 )}
 />
 </div>
 );
}

Lösung des Problems

Falls Sie einfache Elemente (keine Objekte, nur Zeichenfolgen) haben und den Zustand nicht wirklich handhaben müssen (Ihre automatische Vervollständigung wird nicht gesteuert), können Sie die freeSoloStütze der verwenden Autocomplete.

<Autocomplete
 multiple
 freeSolo
 id="tags-outlined"
 options={["foo", "bar"]}
 defaultValue={["foo", "bar"]}
 renderInput={params => (
 <TextField
 {...params}
 variant="outlined"
 label="filterSelectedOptions"
 placeholder="Favorites"
 />
 )}
/>

Falls Ihre Elemente komplexer sind und Sie das Element steuern müssen:

Stellen Sie sicher, dass das Autocomplete-Tag ein kontrolliertes ist (Sie können es wertschätzen).

Hören Sie sich das Key-Down-Ereignis auf dem TextField an.

Wenn der Code Enter( e.code === 'Enter') ist - nehmen Sie den Wert der Eingabe und verschieben Sie ihn in die Liste der aktuellen Werte, die Sie haben.

Stellen Sie sicher, dass Sie auch das behandeln onChange, um das Entfernen von Elementen zu handhaben:

Hier ist der Code:

const [autoCompleteValue, setAutoCompleteValue] = useState(["foo", "bar"]);
return (
 
 <Autocomplete
 multiple
 id="tags-outlined"
 options={[]}
 value={autoCompleteValue}
 onChange={(e, newval, reason) => {
 setAutoCompleteValue(newval);
 }}
 renderInput={params => (
 <TextField
 {...params}
 variant="outlined"
 label="filterSelectedOptions"
 placeholder="Favorites"
 onKeyDown={e => {
 if (e.code === 'enter' && e.target.value) {
 setAutoCompleteValue(autoCompleteValue.concat(e.target.value));
 }
 }}
 />
 )}
 />
);

Überprüfen Sie das Live-Arbeitsbeispiel für beide Optionen: https://codesandbox.io/s/mui-autocomplete-create-options-on-enter-gw1jc