数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 Material UI 中自定义自动完成组件？
在本文中，我们将学习如何在 Material UI 中自定义自动完成组件。
流行的 React UI 框架 Material UI 提供了各种具有现代和优雅设计的组件。自动完成组件就是这样一种灵活的组件，它可以在用户在输入字段中输入时实时提供建议。
借助 Material UI 文档中提供的某些 props，也可以轻松自定义自动完成组件。诸如 renderTags 和 renderInput 之类的 props 可以帮助自定义输入自动完成组件。
自动完成组件不仅可以改善用户体验，还可以实现无缝自定义，使开发人员能够修改其外观、行为和样式，以满足其应用程序的特定需求。
自动完成自定义 Props
在自定义自动完成组件时，可以使用不同的 props。让我们详细了解所有这些 props -
renderInput - 此 prop 用于渲染输入。在使用自动完成组件时，这是必需的 prop。
renderTags - 此 prop 用于渲染标签。它仅渲染提供给组件的选定值。
renderOption - 此 prop 渲染选项，并且默认情况下它使用 getOptionLabel。
getOptionLabel - 此 prop 确定给定选项的字符串值。它用于填充输入（如果未提供 renderOption，则填充列表框选项）。
如果在自由单选模式下使用，它必须同时接受选项的类型和字符串。
filterOptions - 此 prop 是一个函数，用于查找要在搜索时渲染的过滤后的选项。
以上 props 是一些常用的 props，但并不限于此。自动完成组件中还有其他一些 props。
语法
以下是自定义自动完成组件的常用语法 -
<Autocomplete
multiple
renderTags={(value, getTagProps) =>
value.map((item, index) => (
<Chip
key={index}
label={item.label}
{...getTagProps({ index })}
/>
))
}
getOptionLabel={(item) => item.label}
sx={{
display: "inline-block",
}}
options={data}
renderInput={(params) => (
<div {...params}>
<input {...params} />
</div>
)}
/>
示例
以下示例演示了在 Material UI 中具有多个值选择的自定义自动完成组件。
import React from "react";
import Autocomplete from "@mui/material/Autocomplete";
import { Chip } from "@mui/material/";
import TextField from "@mui/material/TextField";
const data = [
{ label: "Java language" },
{ label: "Python language" },
{ label: "C++ language" },
{ label: "C language" },
{ label: "Go language" },
{ label: "JavaScript language" },
{ label: "SQL" },
{ label: "MySQL" },
{ label: "HTML" },
{ label: "CSS" },
{ label: "Nextjs " },
{ label: "ReactJS " },
{ label: "VueJS " },
{ label: "Angular " },
{ label: "Angular JS " },
{ label: "PHP language" },
{ label: "R language" },
{ label: "Objective C language" },
{ label: "Cobol language" },
{ label: "Perl language" },
{ label: "Pascal language" },
{ label: "LISP language" },
{ label: "Fortran language" },
{ label: "Swift language" },
{ label: "Ruby language" },
{ label: "Algol language" },
{ label: "Scala language" },
{ label: "Rust language" },
{ label: "TypeScript language" },
{ label: "Dart language" },
{ label: "Matlab language" },
{ label: "Ada language" },
{ label: ".NET language" },
{ label: "Bash language" },
];
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
}}>
<h3>Select language</h3>
<Autocomplete
multiple
renderTags={(value, getTagProps) =>
value.map((item, index) => (
<Chip
key={index}
label={item.label}
{...getTagProps({ index })}
/>
))
}
getOptionLabel={(item) => item.label}
sx={{
display: "inline-block",
}}
options={data}
renderInput={(params) => (
<TextField
sx={{
width: 300,
bgcolor: "lightgreen",
fontSize: 20,
color: "black",
borderColor: "green",
}}
{...params}
/>
)}
/>
</div>
);
}
输出
示例
以下示例演示了在 Material UI 中的自定义自动完成输入组件。
在此示例中，我们使用自定义样式（如背景颜色、文本颜色、字体大小等）自定义了自动完成组件，此外，我们还使用相应的参数自定义了输入 div。
import React from "react";
import Autocomplete from "@mui/material/Autocomplete";
const data = [
{ label: "Java language" },
{ label: "Python language" },
{ label: "C++ language" },
{ label: "C language" },
{ label: "Go language" },
{ label: "JavaScript language" },
{ label: "SQL" },
{ label: "MySQL" },
{ label: "HTML" },
{ label: "CSS" },
{ label: "Nextjs " },
{ label: "ReactJS " },
{ label: "VueJS " },
{ label: "Angular " },
{ label: "Angular JS " },
{ label: "PHP language" },
{ label: "R language" },
{ label: "Objective C language" },
{ label: "Cobol language" },
{ label: "Perl language" },
{ label: "Pascal language" },
{ label: "LISP language" },
{ label: "Fortran language" },
{ label: "Swift language" },
{ label: "Ruby language" },
{ label: "Algol language" },
{ label: "Scala language" },
{ label: "Rust language" },
{ label: "TypeScript language" },
{ label: "Dart language" },
{ label: "Matlab language" },
{ label: "Ada language" },
{ label: ".NET language" },
{ label: "Bash language" },
];
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
}}>
<h3>Select language</h3>
<Autocomplete
sx={{
"& input": {
width: 300,
padding: 2,
bgcolor: "lightgreen",
fontSize: 20,
color: "black",
borderRadius: 10,
}
}}
options={data}
renderInput={(params) => (
<div ref={params.InputProps.ref}>
<input {...params.inputProps} />
</div>
)}
/>
</div>
);
}
输出
示例
以下示例演示了在 Material UI 中的自定义自动完成输入组件中的提示。在此示例中，我们还添加了提示功能，当用户输入任何内容时，它会显示匹配的结果。我们使用了 renderInput 和 filterOptions 来实现此功能。
import * as React from "react";
import { TextField } from "@mui/material/";
import { Autocomplete } from "@mui/material/";
const data = [
{ label: "Java language" },
{ label: "Python language" },
{ label: "C++ language" },
{ label: "C language" },
{ label: "Go language" },
{ label: "JavaScript language" },
{ label: "SQL" },
{ label: "MySQL" },
{ label: "HTML" },
{ label: "CSS" },
{ label: "Nextjs " },
{ label: "ReactJS " },
{ label: "VueJS " },
{ label: "Angular " },
{ label: "Angular JS " },
{ label: "PHP language" },
{ label: "R language" },
{ label: "Objective C language" },
{ label: "Cobol language" },
{ label: "Perl language" },
{ label: "Pascal language" },
{ label: "LISP language" },
{ label: "Fortran language" },
{ label: "Swift language" },
{ label: "Ruby language" },
{ label: "Algol language" },
{ label: "Scala language" },
{ label: "Rust language" },
{ label: "TypeScript language" },
{ label: "Dart language" },
{ label: "Matlab language" },
{ label: "Ada language" },
{ label: ".NET language" },
{ label: "Bash language" },
];
// main App component rendering the custom autocomplete component
export default function App() {
var getHint = React.useRef("");
const [val, setVal] = React.useState("");
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
}}>
<Autocomplete
onKeyDown={(event) => {
if (event.key === "Tab") {
if (getHint.current) {
setVal(getHint.current);
event.preventDefault();
}
}
}}
onBlur={() => {
getHint.current = "";
}}
disablePortal
inputValue={val}
filterOptions={(options, state) => {
const showItems = options.filter((item) =>
item.label
.toLowerCase()
.trim()
.includes(state.inputValue.toLowerCase().trim())
);
return showItems;
}}
options={data}
renderInput={(params) => {
return (
<div sx={{ position: "relative" }}>
<div>{getHint.current}</div>
<TextField
{...params}
onChange={(event) => {
const selNewVal = event.target.value;
setVal(selNewVal);
const matchItem = data.find((option) =>
option.label.startsWith(selNewVal)
);
if (selNewVal && matchItem) {
getHint.current = matchItem.label;
} else {
getHint.current = "";
}
}}
label="Select language"
/>
</div>
);
}}
sx={{ width: 400 }}
/>
</div>
);
}
输出
结论
我们了解了几种自定义 Material UI 自动完成组件的不同方法。通过更改大小、样式、建议和所选值的处理方式，可以无缝地调整自动完成组件以适应应用程序的设计和功能。Material UI 的适应性和广泛的自定义选项使其成为设计愉悦用户体验的强大工具。
通过试验各种自定义选项并释放您的创造力，为我们的 Material UI 驱动的应用程序创建直观且美观的自动完成组件。
更新于: 2023-10-30
540 次查看
广告