資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 Material UI 中使用多個自動完成值？
廣受歡迎的 React 應用程式 UI 框架 Material UI 提供了一個有效的自動完成元件。藉助自動完成功能，使用者可以在鍵入時從預定義列表中搜索和選擇選項。儘管選擇一個選項是預設行為，但在某些情況下，我們可能希望允許使用者選擇多個值。
在本文中，我們將探討如何在 Material UI 中實現和使用多個自動完成值。
多個自動完成值
預設情況下，使用 Material UI 自動完成元件時，使用者一次只能選擇一個選項。但是，某些場景需要選擇多個選項，例如標籤、選擇多個類別或允許使用者同時輸入多個相關實體。實現多個自動完成值可以透過提高靈活性和效率來改善使用者體驗。
自動完成 Props 中的多個值
multiple − 這是一個布林型別的 prop，用於在自動完成元件中選擇多個值。如果為 true，則值必須是專案或選項的陣列，以允許進行多選。
value − 它是任何型別的 prop，用於管理元件中選定的值。該值必須與選項具有引用相等性才能被選中。
onChange − 這是一個函式 prop，是一個回撥函式，僅在選定值更改時觸發，並具有兩個引數：事件物件和更新後的選定值陣列。
getOptionLabel − 它定義瞭如何在自動完成中顯示選項標籤。它應該是一個函式，該函式將選項物件作為引數，並返回要顯示的該選項的標籤。
使用多個自動完成值的步驟
要在 material ui 中使用多個值，需要遵循一些必要的步驟才能有效地實現多個值。以下是相同的完整分步指南
步驟 1：匯入 Material 和其模組
在 Material UI 中使用多個值的首要步驟是，我們需要匯入元件和一些必要的模組。
import TextField from "@mui/material/TextField"; //texfield for rendering input import Autocomplete from "@mui/material/Autocomplete"; // importing autocomplete from mui import Chip from "@mui/material/Chip"; //for displaying multiple values
步驟 2：定義自動完成元件
在 React 中匯入自動完成元件後，我們現在可以在我們的 React 應用程式中定義該元件。
<Autocomplete
multiple
options={data}
renderInput={(params) => (
<TextField
{...params}
label="Select language"
placeholder="Programming languages"
/>
)}
/>
步驟 3：使用 renderTags prop
要在自動完成元件中新增或選擇多個值，我們在自動完成元件中使用 renderTags prop。以下是如何在元件中新增 prop 的語法。
renderTags={(tagValue, getTagProps) =>
tagValue.map((item, index) => (
<Chip
label={item.label}
{...getTagProps({ index })}
disabled={fixedVal.indexOf(item) !== -1}
/>
))
}
示例 1
以下示例顯示了使用一些固定值在自動完成中新增多個值。
import React, { useState } from "react";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";
import Chip from "@mui/material/Chip"; //for displaying multiple values
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() {
const fixedVal = [data[2]];
const [val, setVal] = useState([...fixedVal]);
const CustomChip = (chipVal, getTagProps) => {
return chipVal.map((item, index) => (
<Chip
label={item.label} //adding options label
{...getTagProps({ index })}
disabled={fixedVal.indexOf(item) !== -1}
/>
));
};
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
}}>
<Autocomplete
multiple
onChange={(event, newValue) => {
setVal([
...fixedVal,
...newValue.filter((i) => fixedVal.indexOf(i) === -1),
]);
}}
value={val}
options={data}
renderInput={(params) => (
<TextField
{...params}
label="Select language"
placeholder="Programming languages"
/>
)}
renderTags={CustomChip}
/>
</div>
);
}
輸出
示例
以下示例顯示了在自動完成中新增有限數量的多個值。
import React, { useState } from "react";
import TextField from "@mui/material/TextField";
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",
}}>
<Autocomplete
multiple
limitTags={3} // displays only 3 max tags of autocomplete when not in focus
options={data}
getOptionLabel={(option) => option.label}
renderInput={(params) => (
<TextField
{...params}
label="Select language"
placeholder="Programming languages"
/>
)}
/>
</div>
);
}
輸出
結論
可以在 Material UI 中實現多個自動完成值，這對於需要使用者以靈活有效的方式輸入資料的 Web 應用程式來說是一個有用的補充。在本文中，我們使用 React 學習瞭如何在 Material UI 自動完成元件中使用多個值。透過遵循分步說明和使用提供的示例，可以輕鬆地將此功能新增到您的 React 專案中。這透過允許使用者快速從預定義列表中選擇多個選項來提高應用程式的整體可用性和互動性。
更新於： 2023-10-30
1K+ 次瀏覽
廣告