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

mm5n2pyu  于 2023-04-05  发布在  React
关注(0)|答案(6)|浏览(163)

我是react-virtualization和Autocomplete的新手。我目前已经构建了一个列表,当选中复选框时会显示多个文本。下面是我的代码:https://codesandbox.io/s/material-demo-forked-1qzd3?file=/demo.tsx
我想只显示一个文本时,任何东西都是从列表中选择,并删除清除按钮和灰色背景附加到它。

xoshrz7s

xoshrz7s1#

有一个专用的prop来禁用Icon。在Autocomplete组件上尝试prop "disableClearable",它在文档中:

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

cyej8jka2#

从MUIv 5开始,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' prop ,因为向下箭头不会在那里点击打开自动完成。
MUI还为.MuiInput-root类添加了一些paddingRight,为clearIcon和downArrow腾出一些空间,所以如果空间紧张,可能需要删除它们,我最终在TextField类上使用了!important css规则,但我们仍然使用旧的JSS方式。不确定正确的情感样式方式是什么。

gopyfrb3

gopyfrb33#

试试这个:

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 }
];
smdncfj3

smdncfj34#

返回所有参数,TextField中不包含endAdornment

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

7rfyedvj5#

使用typescript和设置disableClearable={true}的受控MuiAutocomplete可能会导致类型检查错误(错误:值应为T或undefined)。
当我的受控值类型定义为T时,我就遇到了这种情况|无效。
在这种情况下,只需disableClearable={value !== null}即可解决问题

4ngedf3f

4ngedf3f6#

我在Material UI V5中使用freeSolo解决了这个问题。
您必须将disableClearable={true}添加到Autocomplete,然后从Textfield中删除type:text
你应该有这样的东西。

<Autocomplete
  disableClearable={true}
  freeSolo
  renderInput={(params) => (
    <TextField
      {...params}
      placeholder={placeholder}
    />
  )}
  name="input"
/>```

相关问题