如何删除自动完成上的清除按钮并仅显示文本

Question

我是反应虚拟化和自动完成的新手。我目前正在构建一个列表，在选择复选框时显示多个文本。这是我的代码：https : //codesandbox.io/s/material-demo-forked-1qzd3?file=/demo.tsx

当从列表中选择任何内容时，我只想显示一个文本，并删除附加的清除按钮和灰色背景。

Answer 1

有一个专用道具可以禁用图标。试试"disableClearable"文档中的 Autocomplete 组件上的道具：

<Autocomplete
    {...defaultProps}
    id="disable-clearable"
    disableClearable
    renderInput={(params) => <TextField {...params} label="disableClearable" 
    margin="normal" />}
/>

Answer 2

使用打字稿和设置控制 MuiAutocompletedisableClearable={true}可能会导致类型检查错误（错误：值应为 T 或未定义）。

当我的受控值类型定义为 T | 时，这种情况发生在我身上。无效的。

在这种情况下刚刚disableClearable={value !== null}解决了问题

Answer 3

尝试这个 ：

\n

import React, { useState } from "react";\nimport Checkbox from "@material-ui/core/Checkbox";\nimport TextField from "@material-ui/core/TextField";\nimport Autocomplete from "@material-ui/lab/Autocomplete";\nimport CheckBoxOutlineBlankIcon from "@material-ui/icons/CheckBoxOutlineBlank";\nimport { ListItemText } from "@material-ui/core";\nimport CheckBoxIcon from "@material-ui/icons/CheckBox";\nimport MenuItem from "@material-ui/core/MenuItem";\nimport { List } from "react-virtualized";\nimport faker from "faker";\n\nconst icon = <CheckBoxOutlineBlankIcon fontSize="small" />;\nconst checkedIcon = <CheckBoxIcon fontSize="small" />;\n\nconst ListboxComponent = React.forwardRef(function ListboxComponent(\n  props,\n  ref\n) {\n  const { children, role, ...other } = props;\n  const itemCount = Array.isArray(children) ? children.length : 0;\n  const itemSize = 36;\n\n  return (\n    <div ref={ref}>\n      <div {...other}>\n        <List\n          height={250}\n          width={300}\n          rowHeight={itemSize}\n          overscanCount={5}\n          rowCount={itemCount}\n          rowRenderer={(props) => {\n            return React.cloneElement(children[props.index], {\n              style: props.style\n            });\n          }}\n          role={role}\n        />\n      </div>\n    </div>\n  );\n});\n\nconst myDAta = Array.from(new Array(10000)).map(() => {\n  return { name: faker.name.findName() };\n});\n\nmyDAta.unshift({ name: "ALL" });\n\nexport default function CheckboxesTags() {\n  const [selectedFilm, setSelectedFilm] = useState([]);\n  const onCloseHandle = () => {\n    console.log("Closed");\n  };\n  return (\n    <Autocomplete\n      id="checkboxes-tags-demo"\n      ListboxComponent={ListboxComponent}\n      options={myDAta}\n      onChange={(e, film) => {\n        console.log(e.target);\n        setSelectedFilm(film);\n      }}\n      onClose={onCloseHandle}\n      getOptionLabel={(option) => option.name}\n      // fullWidth\n      renderOption={(option) => <>{option.name}</>}\n      closeIcon=""\n\n      style={{ width: 300, maxHeight: "1px" }}\n      renderInput={(params) => (\n        <TextField\n          {...params}\n          variant="outlined"\n          label="Checkboxes"\n          placeholder="Favorites"\n        />\n      )}\n    />\n  );\n}\n\n// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top\nconst top100Films = [\n  { title: "All", year: 0 },\n  { title: "The Shawshank Redemption", year: 1994 },\n  { title: "The Godfather", year: 1972 },\n  { title: "The Godfather: Part II", year: 1974 },\n  { title: "The Dark Knight", year: 2008 },\n  { title: "12 Angry Men", year: 1957 },\n  { title: "Schindler's List", year: 1993 },\n  { title: "Pulp Fiction", year: 1994 },\n  { title: "The Lord of the Rings: The Return of the King", year: 2003 },\n  { title: "The Good, the Bad and the Ugly", year: 1966 },\n  { title: "Fight Club", year: 1999 },\n  { title: "The Lord of the Rings: The Fellowship of the Ring", year: 2001 },\n  { title: "Star Wars: Episode V - The Empire Strikes Back", year: 1980 },\n  { title: "Forrest Gump", year: 1994 },\n  { title: "Inception", year: 2010 },\n  { title: "The Lord of the Rings: The Two Towers", year: 2002 },\n  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },\n  { title: "Goodfellas", year: 1990 },\n  { title: "The Matrix", year: 1999 },\n  { title: "Seven Samurai", year: 1954 },\n  { title: "Star Wars: Episode IV - A New Hope", year: 1977 },\n  { title: "City of God", year: 2002 },\n  { title: "Se7en", year: 1995 },\n  { title: "The Silence of the Lambs", year: 1991 },\n  { title: "It's a Wonderful Life", year: 1946 },\n  { title: "Life Is Beautiful", year: 1997 },\n  { title: "The Usual Suspects", year: 1995 },\n  { title: "L\xc3\xa9on: The Professional", year: 1994 },\n  { title: "Spirited Away", year: 2001 },\n  { title: "Saving Private Ryan", year: 1998 },\n  { title: "Once Upon a Time in the West", year: 1968 },\n  { title: "American History X", year: 1998 },\n  { title: "Interstellar", year: 2014 }\n];\n

\n