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
无法读取未定义的属性“标题”

如果自动完成功能具有> 1个筹码，然后单击x，它将一遍又一遍地添加最后一个筹码。

查看自动完成API（https://material-ui.com/api/autocomplete/），我看不到芯片本身有任何“ onClose”，仅显示其中带有选项的弹出窗口。

我需要从控制的自动完成功能中删除项目的专用道具吗？

感谢您的任何想法，非常感谢！

Answer 1

您需要将onchange更改为此：

Enter a sentence: Hello World!
Encoded: Svool Dliow!
Decoded: Hello World!

如何从受控的自动完成功能中删除芯片？

1 个答案: