Как удалить фишку из управляемого автозаполнения?

Question

В настоящее время я работаю с компонентом «Автозаполнение» Material-UI, чтобы иметь возможность множественного выбора.

https://codesandbox.io/s/material-demo-9zlfz?file= / chipdemo. js

/* eslint-disable no-use-before-define */
import React, { useState } from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";

export default function ComboBox() {
  const handleOnChange = ({ target }) => console.log(target.value);
  const [state, setState] = useState([]);

  return (
    <Autocomplete
      multiple
      id="combo-box-demo"
      options={top100Films}
      value={state}
      onChange={(e, newval) => {
        console.log(newval);
        setState(prev => [...prev, newval[newval.length - 1]]);
      }}
      getOptionLabel={option => option.title}
      style={{ width: 300 }}
      renderInput={params => (
        <TextField
          {...params}
          label="Combo box"
          variant="outlined"
          fullWidth
          onChange={handleOnChange}
        />
      )}
    />
  );
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
...
];

Я пытаюсь использовать его как управляемый компонент, я могу добавить столько чипов, сколько захочу из списка, однако, когда дело доходит до их удаления по отдельности, у меня есть два разных случая

Если автозаполнение имеет 1 фишку (длина 0), и я нажимаю x, я получаю

TypeError
Невозможно прочитать свойство 'title' неопределенного

Если автозаполнение содержит> 1 чип, и я нажимаю x, вместо этого последний чип будет добавляться снова и снова.

Глядя на API автозаполнения (https://material-ui.com/api/autocomplete/) Я не вижу никакого «onClose» для самих чипов, только для всплывающего окна с параметрами внутри.

Есть ли особая c prop мне нужно удалить элементы из управляемого автозаполнения?

Спасибо за любые мысли, большое спасибо!

Answer 1

вам нужно изменить свой onchange на этот:

onChange={(e, newval) => {
        console.log(newval);
        setState(newval);
      }}