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

Posted 2023-03-05

【中文标题】如何删除自动完成上的清除按钮并仅显示文本

【英文标题】：How to remove Clear button on Autocomplete and show only text

【发布时间】：2021-01-20 08:58:02

【问题描述】：

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

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

【参考方案1】：

有一个专用的道具来禁用图标。 在 Autocomplete 组件上尝试 prop "disableClearable" 它在文档中：

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

【参考方案2】：

试试这个：

import React,  useState  from "react";
import Checkbox from "@material-ui/core/Checkbox";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import CheckBoxOutlineBlankIcon from "@material-ui/icons/CheckBoxOutlineBlank";
import  ListItemText  from "@material-ui/core";
import CheckBoxIcon from "@material-ui/icons/CheckBox";
import MenuItem from "@material-ui/core/MenuItem";
import  List  from "react-virtualized";
import faker from "faker";

const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
const checkedIcon = <CheckBoxIcon fontSize="small" />;

const ListboxComponent = React.forwardRef(function ListboxComponent(
  props,
  ref
) 
  const  children, role, ...other  = props;
  const itemCount = Array.isArray(children) ? children.length : 0;
  const itemSize = 36;

  return (
    <div ref=ref>
      <div ...other>
        <List
          height=250
          width=300
          rowHeight=itemSize
          overscanCount=5
          rowCount=itemCount
          rowRenderer=(props) => 
            return React.cloneElement(children[props.index], 
              style: props.style
            );
          
          role=role
        />
      </div>
    </div>
  );
);

const myDAta = Array.from(new Array(10000)).map(() => 
  return  name: faker.name.findName() ;
);

myDAta.unshift( name: "ALL" );

export default function CheckboxesTags() 
  const [selectedFilm, setSelectedFilm] = useState([]);
  const onCloseHandle = () => 
    console.log("Closed");
  ;
  return (
    <Autocomplete
      id="checkboxes-tags-demo"
      ListboxComponent=ListboxComponent
      options=myDAta
      onChange=(e, film) => 
        console.log(e.target);
        setSelectedFilm(film);
      
      onClose=onCloseHandle
      getOptionLabel=(option) => option.name
      // fullWidth
      renderOption=(option) => <>option.name</>
      closeIcon=""

      style= width: 300, maxHeight: "1px" 
      renderInput=(params) => (
        <TextField
          ...params
          variant="outlined"
          label="Checkboxes"
          placeholder="Favorites"
        />
      )
    />
  );


// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
   title: "All", year: 0 ,
   title: "The Shawshank Redemption", year: 1994 ,
   title: "The Godfather", year: 1972 ,
   title: "The Godfather: Part II", year: 1974 ,
   title: "The Dark Knight", year: 2008 ,
   title: "12 Angry Men", year: 1957 ,
   title: "Schindler's List", year: 1993 ,
   title: "Pulp Fiction", year: 1994 ,
   title: "The Lord of the Rings: The Return of the King", year: 2003 ,
   title: "The Good, the Bad and the Ugly", year: 1966 ,
   title: "Fight Club", year: 1999 ,
   title: "The Lord of the Rings: The Fellowship of the Ring", year: 2001 ,
   title: "Star Wars: Episode V - The Empire Strikes Back", year: 1980 ,
   title: "Forrest Gump", year: 1994 ,
   title: "Inception", year: 2010 ,
   title: "The Lord of the Rings: The Two Towers", year: 2002 ,
   title: "One Flew Over the Cuckoo's Nest", year: 1975 ,
   title: "Goodfellas", year: 1990 ,
   title: "The Matrix", year: 1999 ,
   title: "Seven Samurai", year: 1954 ,
   title: "Star Wars: Episode IV - A New Hope", year: 1977 ,
   title: "City of God", year: 2002 ,
   title: "Se7en", year: 1995 ,
   title: "The Silence of the Lambs", year: 1991 ,
   title: "It's a Wonderful Life", year: 1946 ,
   title: "Life Is Beautiful", year: 1997 ,
   title: "The Usual Suspects", year: 1995 ,
   title: "Léon: The Professional", year: 1994 ,
   title: "Spirited Away", year: 2001 ,
   title: "Saving Private Ryan", year: 1998 ,
   title: "Once Upon a Time in the West", year: 1968 ,
   title: "American History X", year: 1998 ,
   title: "Interstellar", year: 2014 
];

【讨论】：

这只是隐藏了我可以接受的关闭图标。但是如何删除文本周围的关闭图标和灰色背景？ @Priyanka Panjabi

这将允许您一次只进行一个选择，而无需关闭图标和背景。要添加多选吗？

在共享沙盒链接时，我正在使用复选框进行多项选择。所以是的，我想用复选框@Priyanka Panjabi 进行多项选择

但是你已经提到了“当从列表中选择任何内容时，我只想显示一个文本”

是的。因此，如果有复选框和多项选择，那么我应该只显示第一个选择而不是其他选择，并且没有关闭按钮和背景。只是文字。对不起我的台词。它从多个数据中选择。

【参考方案3】：

返回所有参数，TextField 中没有 endAdornment

renderInput=(params) => <TextField ...params 
InputProps= ...params.InputProps, endAdornment : null 
onPaste=handlePaste variant='outlined'/>