如何在Material UI自动完成功能中向清除按钮图标添加/编辑功能?

Mikael JS

我有下面的代码

                   <Autocomplete
                        id='combo-box-demo'
                        options={companies}
                        getOptionLabel={getOptionLabel}
                        renderInput={params => (
                            <TextField {...params} variant='outlined' />
                        )}
                        onChange={(event, newValue) => onCompanyChange(event, newValue)}
                    />

当我单击自动完成输入中的清除按钮时,我想自定义功能。我需要问用户是否真的要先清除该字段。是否可以定位.MuiAutocomplete-clearIndicator,以便可以在其上添加更多功能?谢谢是提前!

Gayatri dipali

您可以按照以下代码操作,尽管我会显示一个警报,但您可以发出警报modal并显示是否愿意

代码:

import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";

export default function ComboBox() {
  setTimeout(async () => {
    const close = await document.getElementsByClassName(
      "MuiAutocomplete-clearIndicator"
    )[0];
    close.addEventListener("click", () => {
      alert("Really, clear the input");
    });
  }, 100);

  return (
    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={(option) => option.title}
      style={{ width: 300 }}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
    />
  );
}

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
  { 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 },
  { title: "Casablanca", year: 1942 },
  { title: "City Lights", year: 1931 },
  { title: "Psycho", year: 1960 },
  { title: "The Green Mile", year: 1999 },
  { title: "The Intouchables", year: 2011 },
  { title: "Modern Times", year: 1936 },
  { title: "Raiders of the Lost Ark", year: 1981 },
  { title: "Rear Window", year: 1954 },
  { title: "The Pianist", year: 2002 },
  { title: "The Departed", year: 2006 },
  { title: "Terminator 2: Judgment Day", year: 1991 },
  { title: "Back to the Future", year: 1985 },
  { title: "Whiplash", year: 2014 },
  { title: "Gladiator", year: 2000 },
  { title: "Memento", year: 2000 },
  { title: "The Prestige", year: 2006 },
  { title: "The Lion King", year: 1994 },
  { title: "Apocalypse Now", year: 1979 },
  { title: "Alien", year: 1979 },
  { title: "Sunset Boulevard", year: 1950 },
  {
    title:
      "Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb",
    year: 1964
  },
  { title: "The Great Dictator", year: 1940 },
  { title: "Cinema Paradiso", year: 1988 },
  { title: "The Lives of Others", year: 2006 },
  { title: "Grave of the Fireflies", year: 1988 },
  { title: "Paths of Glory", year: 1957 },
  { title: "Django Unchained", year: 2012 },
  { title: "The Shining", year: 1980 },
  { title: "WALL·E", year: 2008 },
  { title: "American Beauty", year: 1999 },
  { title: "The Dark Knight Rises", year: 2012 },
  { title: "Princess Mononoke", year: 1997 },
  { title: "Aliens", year: 1986 },
  { title: "Oldboy", year: 2003 },
  { title: "Once Upon a Time in America", year: 1984 },
  { title: "Witness for the Prosecution", year: 1957 },
  { title: "Das Boot", year: 1981 },
  { title: "Citizen Kane", year: 1941 },
  { title: "North by Northwest", year: 1959 },
  { title: "Vertigo", year: 1958 },
  { title: "Star Wars: Episode VI - Return of the Jedi", year: 1983 },
  { title: "Reservoir Dogs", year: 1992 },
  { title: "Braveheart", year: 1995 },
  { title: "M", year: 1931 },
  { title: "Requiem for a Dream", year: 2000 },
  { title: "Amélie", year: 2001 },
  { title: "A Clockwork Orange", year: 1971 },
  { title: "Like Stars on Earth", year: 2007 },
  { title: "Taxi Driver", year: 1976 },
  { title: "Lawrence of Arabia", year: 1962 },
  { title: "Double Indemnity", year: 1944 },
  { title: "Eternal Sunshine of the Spotless Mind", year: 2004 },
  { title: "Amadeus", year: 1984 },
  { title: "To Kill a Mockingbird", year: 1962 },
  { title: "Toy Story 3", year: 2010 },
  { title: "Logan", year: 2017 },
  { title: "Full Metal Jacket", year: 1987 },
  { title: "Dangal", year: 2016 },
  { title: "The Sting", year: 1973 },
  { title: "2001: A Space Odyssey", year: 1968 },
  { title: "Singin' in the Rain", year: 1952 },
  { title: "Toy Story", year: 1995 },
  { title: "Bicycle Thieves", year: 1948 },
  { title: "The Kid", year: 1921 },
  { title: "Inglourious Basterds", year: 2009 },
  { title: "Snatch", year: 2000 },
  { title: "3 Idiots", year: 2009 },
  { title: "Monty Python and the Holy Grail", year: 1975 }
];

如果您想要一个干净的模态,而不是警报,可以将模态设置为在close.addEventListener第二个参数中可见(即函数本身)

您可以在此处的codeandbox中签出工作演示:链接到工作演示

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何向Jquery自动完成功能添加搜索按钮

来自分类Dev

React Formik Material UI自动完成功能:如何在localStorage的自动完成功能中填充值?

来自分类Dev

如何向表中的每个单元格添加jQuery自动完成UI功能

来自分类Dev

如何在zsh中为自定义完成功能的路径添加自动完成功能?

来自分类Dev

如何添加地理自动完成功能?

来自分类Dev

如何在自动完成功能(jQuery ui)中搜索关键字

来自分类Dev

如何在jQuery UI中强制打开自动完成功能

来自分类Dev

如何在<h:inputText>中禁用自动完成功能?

来自分类Dev

如何在CakeStor的PHPStorm中启用自动完成功能

来自分类Dev

如何在Spyder中禁用括号自动完成功能?

来自分类Dev

如何在ajax函数中调用自动完成功能

来自分类Dev

如何在<h:inputText>中禁用自动完成功能?

来自分类Dev

如何在IntelliJ中打开自动代码完成功能?

来自分类Dev

如何在JSP中实现机场自动完成功能?

来自分类Dev

如何以编程方式清除angularjs中的材料设计自动完成功能?

来自分类Dev

如何以编程方式清除angularjs中的材料设计自动完成功能?

来自分类Dev

如何将标题添加到jQuery UI自动完成功能

来自分类Dev

如何使Rails 4使用Jquery UI自动完成功能?

来自分类Dev

如何使jQuery UI自动完成功能忽略HTML实体

来自分类Dev

如何在Android布局中向按钮添加功能?

来自分类Dev

如何在旧版jQuery UI中使jQuery UI自动完成功能正常工作?

来自分类Dev

如何将自动完成功能添加到动态创建的输入中?

来自分类Dev

如何为 eclipse 插件中的文本添加自动完成功能?

来自分类Dev

如何在React Material-UI Stepper中向按钮添加href

来自分类Dev

如何清除material-ui自动完成字段中的文本?

来自分类Dev

如何直接从服务器运行自动完成功能,而不是默认的JQuery UI自动完成功能?

来自分类Dev

当我使用 jquery-ui 自动完成功能在 textarea 中输入时,如何在任何位置实现自动完成?

来自分类Dev

如何使用FormBuilder在Angular中关闭自动完成功能

来自分类Dev

如何关闭Gmail / Googlemail中的文本自动完成功能?

Related 相关文章

  1. 1

    如何向Jquery自动完成功能添加搜索按钮

  2. 2

    React Formik Material UI自动完成功能:如何在localStorage的自动完成功能中填充值?

  3. 3

    如何向表中的每个单元格添加jQuery自动完成UI功能

  4. 4

    如何在zsh中为自定义完成功能的路径添加自动完成功能?

  5. 5

    如何添加地理自动完成功能?

  6. 6

    如何在自动完成功能(jQuery ui)中搜索关键字

  7. 7

    如何在jQuery UI中强制打开自动完成功能

  8. 8

    如何在<h:inputText>中禁用自动完成功能?

  9. 9

    如何在CakeStor的PHPStorm中启用自动完成功能

  10. 10

    如何在Spyder中禁用括号自动完成功能?

  11. 11

    如何在ajax函数中调用自动完成功能

  12. 12

    如何在<h:inputText>中禁用自动完成功能?

  13. 13

    如何在IntelliJ中打开自动代码完成功能?

  14. 14

    如何在JSP中实现机场自动完成功能?

  15. 15

    如何以编程方式清除angularjs中的材料设计自动完成功能?

  16. 16

    如何以编程方式清除angularjs中的材料设计自动完成功能?

  17. 17

    如何将标题添加到jQuery UI自动完成功能

  18. 18

    如何使Rails 4使用Jquery UI自动完成功能?

  19. 19

    如何使jQuery UI自动完成功能忽略HTML实体

  20. 20

    如何在Android布局中向按钮添加功能?

  21. 21

    如何在旧版jQuery UI中使jQuery UI自动完成功能正常工作?

  22. 22

    如何将自动完成功能添加到动态创建的输入中?

  23. 23

    如何为 eclipse 插件中的文本添加自动完成功能?

  24. 24

    如何在React Material-UI Stepper中向按钮添加href

  25. 25

    如何清除material-ui自动完成字段中的文本?

  26. 26

    如何直接从服务器运行自动完成功能,而不是默认的JQuery UI自动完成功能?

  27. 27

    当我使用 jquery-ui 自动完成功能在 textarea 中输入时,如何在任何位置实现自动完成?

  28. 28

    如何使用FormBuilder在Angular中关闭自动完成功能

  29. 29

    如何关闭Gmail / Googlemail中的文本自动完成功能?

热门标签

归档