问题描述
我需要从我从 Material UI 文档 (https://material-ui.com/components/autocomplete/#autocomplete) Highlights 部分修改的 Material UI TextField 中删除作为向上和向下箭头的右侧图标。
我尝试了一些堆栈溢出的解决方案,如 (Remove the arrow and cross that appears for TextField type=“time” material-ui React) 和 (Remove the arrow and cross that appears for TextField type=“time” material-ui React) 但它们没有用,最后我得到了以下代码:
App.js:
import React from "react";
import "./styles.css";
import { makeStyles } from "@material-ui/core/styles";
import Autocomplete from "@material-ui/lab/Autocomplete";
import parse from "autosuggest-highlight/parse";
import match from "autosuggest-highlight/match";
import { InputAdornment,TextField } from "@material-ui/core";
import SearchIcon from "@material-ui/icons/Search";
const useStyles = makeStyles(() => ({
noBorder: {
border: "none"
}
}));
export default function Highlights() {
const classes = useStyles();
return (
<Autocomplete
style={{ width: 300 }}
options={top100Films}
getoptionLabel={(option) => option.title}
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
margin="normal"
required
fullWidth
autoFocus
classes={{ notchedOutline: classes.input }}
// onChange={handlePhoneNumberChange}
placeholder="Search..."
type="search"
InputProps={{
...params.InputProps,startAdornment: (
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
),classes: { notchedOutline: classes.noBorder }
}}
/>
)}
renderOption={(option,{ inputValue }) => {
const matches = match(option.title,inputValue);
const parts = parse(option.title,matches);
return (
<div>
{parts.map((part,index) => (
<span
key={index}
style={{ fontWeight: part.highlight ? 700 : 400 }}
>
{part.text}
</span>
))}
</div>
);
}}
/>
);
}
// 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",{ 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 },{ title: "Casablanca",year: 1942 },{ title: "City Lights",year: 1931 },{ title: "Psycho",year: 1960 },{ title: "The Green Mile",{ title: "The Intouchables",year: 2011 },{ title: "Modern Times",year: 1936 },{ title: "Raiders of the Lost Ark",year: 1981 },{ title: "Rear Window",{ title: "The Pianist",{ title: "The Departed",year: 2006 },{ title: "Terminator 2: Judgment Day",{ title: "Back to the Future",year: 1985 },{ title: "Whiplash",{ title: "Gladiator",year: 2000 },{ title: "Memento",{ title: "The Prestige",{ title: "The Lion King",{ title: "Apocalypse Now",year: 1979 },{ title: "Alien",{ 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",{ title: "Grave of the Fireflies",{ title: "Paths of Glory",{ title: "Django Unchained",year: 2012 },{ title: "The Shining",{ title: "WALL·E",{ title: "American Beauty",{ title: "The Dark Knight Rises",{ title: "Princess Mononoke",{ title: "Aliens",year: 1986 },{ title: "Oldboy",{ title: "Once Upon a Time in America",year: 1984 },{ title: "Witness for the Prosecution",{ title: "Das Boot",{ 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",{ title: "M",{ title: "Requiem for a Dream",{ title: "Amélie",{ 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",{ title: "To Kill a Mockingbird",{ title: "Toy Story 3",{ title: "Logan",year: 2017 },{ title: "Full Metal Jacket",year: 1987 },{ title: "Dangal",year: 2016 },{ title: "The Sting",year: 1973 },{ title: "2001: A Space Odyssey",{ title: "Singin' in the Rain",year: 1952 },{ title: "Toy Story",{ title: "Bicycle Thieves",year: 1948 },{ title: "The Kid",year: 1921 },{ title: "InglourIoUs Basterds",year: 2009 },{ title: "Snatch",{ title: "3 Idiots",{ title: "Monty Python and the Holy Grail",year: 1975 }
];
styles.css:
.App {
font-family: sans-serif;
text-align: center;
}
/* Chrome,Safari,Edge,Opera */
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type="search"] {
-moz-appearance: textfield;
}
/* remove outsideof arrows button */
input[type="search"]::-webkit-outside-spin-button {
display: none;
}
解决方法
根据这个document你需要添加freesolo
return (
<Autocomplete
style={{ width: 300 }}
options={top100Films}
freeSolo
getOptionLabel={(option) => option.title}
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
margin="normal"
required
fullWidth
autoFocus
classes={{ notchedOutline: classes.input }}
// onChange={handlePhoneNumberChange}
placeholder="Search..."
type="search"
InputProps={{
...params.InputProps,startAdornment: (
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
),classes: { notchedOutline: classes.noBorder }
}}
/>
)}
renderOption={(option,{ inputValue }) => {
const matches = match(option.title,inputValue);
const parts = parse(option.title,matches);
return (
<div>
{parts.map((part,index) => (
<span
key={index}
style={{ fontWeight: part.highlight ? 700 : 400 }}
>
{part.text}
</span>
))}
</div>
);
}}
/>
);
,
试试这个 css 代码(对于这个链接 https://material-ui.com/components/autocomplete/#autocomplete)
.MuiAutocomplete-popupIndicator {
display: none !important;
}
,
你不需要freesolo。
<Autocomplete>
...
popupIcon={null}
/>
通过这种方式,您可以删除 ArrowDownIcon,但请记住 Autocomplete 免费的单独和组合框背后的想法:
小部件(Material UI Autocomplete)对于设置单行文本框的值很有用 两种场景之一:
- 文本框的值必须从一组预定义的 允许的值,例如,位置字段必须包含有效位置 名称:组合框。
- 文本框可以包含任意值,但它 有利于向用户建议可能的值,例如,搜索 字段可能会建议类似或以前的搜索以节省用户时间: 免费独奏。