问题描述
我是反应虚拟化和自动完成的新手。目前我已经建立一个列表,显示多个文本选中该复选框时。这是我的代码: https://codesandbox.io/s/material-demo-forked-1qzd3?file=/demo.tsx
当我从列表中选择任何内容时,我只想显示一个文本,还要删除清除按钮和附加的灰色背景。
解决方法
有一个专用道具可以禁用图标。
尝试自动完成组件上的道具 "disableClearable"
它在文档中:
<Autocomplete
{...defaultProps}
id="disable-clearable"
disableClearable
renderInput={(params) => <TextField {...params} label="disableClearable"
margin="normal" />}
/>
,
尝试一下:
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",{ 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",{ 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",{ title: "Seven Samurai",year: 1954 },{ title: "Star Wars: Episode IV - A New Hope",year: 1977 },{ title: "City of God",{ 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",{ title: "Léon: The Professional",{ title: "Spirited Away",{ title: "Saving Private Ryan",year: 1998 },{ title: "Once Upon a Time in the West",year: 1968 },{ title: "American History X",{ title: "Interstellar",year: 2014 }
];
,
返回所有参数,在endAdornment
中不包含TextField
renderInput={(params) => <TextField {...params}
InputProps={{ ...params.InputProps,endAdornment : null }}
onPaste={handlePaste} variant='outlined'/>}