Материал для автозаполнения нажмите Enter, чтобы создать новые чипы

Question

I wi sh Я мог бы сделать такую ​​вещь, используя Автозаполнение материала ui: wertarbyte

То есть вставка текста (строки) без списка элементов, из которых вы должен выбрать.

Поэтому сообщение noOptions не должно появляться, при каждом нажатии клавиши ввода на клавиатуре вставляется текст.

Ссылка: коды и поле

Код:

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>
  );
}

Answer 1

Если у вас есть простые элементы (не объекты, а только строки), и вам не нужно обрабатывать состояние (ваше автозаполнение не контролируется), вы можете использовать freeSolo опору Autocomplete.

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

В случае, если ваши элементы более сложны, и вам необходимо контролировать элемент:
1. Убедитесь, что тег Autocomplete является контролируемым (вам удается оценить).

1. Прослушивание события нажатия клавиши на TextField.
2. Если ключ enter (keyCode === 13) - возьмите значение ввода и pu sh в список текущих значений, которые у вас есть.
3. Убедитесь, что Вы также обрабатываете onChange для удаления элементов:

Вот код:

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.keyCode === 13 && e.target.value) {
            setAutoCompleteValue(autocompleteValue.concat(e.target.value));
          }
        }}
      />
    )}
  />
);

Проверьте пример работающего в реальном времени обоих вариантов: https://codesandbox.io/s/mui-autocomplete-create-options-on-enter-gw1jc

Answer 2

Для этого не используйте элемент Autocomplete из MUI. Просто используйте стандарт TextField с использованием InputProps. Все, что вам нужно сделать, это добавить onKeyDown слушатель к TextField, который прослушивает 'Enter', и когда функция сработает, добавьте его в массив Chips в InputProps. Это может выглядеть примерно так:

const [inputValue, setInputValue] = useState('');
const [chips, setChips] = useState([])
const inputChange = ({target: {value}}) => {setInputValue(value)};
const handleKeyDown = ({key}) => {
 if(key === 'Enter') {
  setChips([...chips, inputValue])
 }
};
     <TextField
            fullWidth
            variant="outlined"
            label="Fish and Chips"
            value={inputValue}
            onChange={inputChange}
            multiline
            InputProps={{
              startAdornment: chips.map((item) => (
                <Chip
                  key={item}
                  label={item}
                />
              )),
            }}
          />

Это не проверено, как написано здесь, но оно должно работать. Я сделал нечто подобное в одном из моих приложений.