我是反应虚拟化和自动完成的新手。我目前已经建立了一个列表,当复选框被选中时,它会显示多个文本。这是我的代码: 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" />}
/>
从 MUIv5 开始,Autocomplete 不再在实验室中,它做的事情有点不同,并为您提供更多显示定制。清除图标和向下箭头都在传递给 renderInput 函数的 InputProps.endAdornment 中。所以你可以在传播到 TextField 之前删除它
<Autocomplete
options={options}
renderInput={params => {
const InputProps = { ...params.InputProps };
InputProps.endAdornment = null;
return (
<TextField
{...params}
InputProps={InputProps}
/>
);
}}
openOnFocus
/>
注意 InputProps 在 {...params} 传播后的情况。
如果你这样做,你需要添加“openOnFocus”道具,因为向下箭头不会在那里点击打开自动完成。
MUI 还向 .MuiInput-root 类添加了一些 paddingRight,以便为 clearIcon 和 downArrow 腾出一些空间,因此如果空间紧张,您可能需要删除它们,我最终在 TextField 类上使用了 !important css 规则,但我们仍在使用旧的 JSS 方式。不确定正确的情感造型方式是什么。
试试这个:
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 }
];
返回所有参数,没有
endAdornment
在TextField
renderInput={(params) => <TextField {...params}
InputProps={{ ...params.InputProps, endAdornment : null }}
onPaste={handlePaste} variant='outlined'/>}
使用 typescript 和设置
disableClearable={true}
控制 MuiAutocomplete 会导致类型检查错误(错误:值应为 T 或未定义)。
当我的受控值类型定义为 T | 时,这发生在我身上无效
在这种情况下
disableClearable={value !== null}
解决了问题
我在 Material UI V5 中解决了这个问题并使用
freeSolo
.
你必须添加
disableClearable={true}
到 Autocomplete
然后你应该删除 type:text
从 Textfield
.
你应该有这样的东西。
<Autocomplete
disableClearable={true}
freeSolo
renderInput={(params) => (
<TextField
{...params}
placeholder={placeholder}
/>
)}
name="input"
/>```