資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 Material UI 的 ComboBox 中使用受控狀態？
在使用者介面開發領域，熟練地管理使用者互動至關重要。Material UI 的自動完成元件提供了受控狀態的概念，允許開發者透過外部狀態管理來控制組件的行為和資料。與僅僅依賴元件的本地狀態不同，受控狀態能夠與整個應用程式狀態同步，從而建立更集中和可預測的使用者互動。
在本文中，我們將探討自動完成組合框中受控狀態的概念，並學習如何有效地使用它們來獨立管理“值”和“輸入值”狀態。
理解自動完成組合框中的受控狀態
不受控元件是指具有本地狀態的元件，不受其父元件的影響。例如，原始的 Panel 元件及其 isActive 狀態變數是不受控的，因為其父元件無法影響其活動狀態。
另一方面，當元件的重要資訊由 props 而不是其內部狀態驅動時，該元件被認為是“受控的”。這使父元件能夠完全控制其行為。例如，最終的 Panel 元件及其 isActive prop 受 Accordion 元件控制。
不受控元件在其父結構中使用起來更簡單，需要更少的配置。但是，當需要它們之間的協調時，它們就會變得不太靈活。受控元件提供了最大的靈活性，但其父元件必須使用 props 對其進行完全配置。
在自動完成元件中，可以控制兩個狀態：
值狀態 - 透過 value/onChange props 組合管理，表示使用者選擇的值，例如按 Enter 鍵時。
輸入值狀態 - 由 inputValue/onInputChange props 組合控制，表示文字框中顯示的值。
這兩個狀態保持隔離，應該獨立控制。
使用的 Props
"value" - 設定自動完成中選擇的值，使開發人員能夠控制顯示的所選項。
"onChange" - 處理自動完成中選擇的值發生更改時的事件，使開發人員能夠在使用者選擇新值時更新狀態並採取必要的措施。
"inputValue" - 設定和控制自動完成文字框中顯示的值，允許開發人員顯示預設值或預定義值，或根據使用者輸入更新它。
"onInputChange" - prop 負責處理使用者在自動完成文字框中輸入或修改輸入時的事件。它可以對使用者輸入做出響應並相應地管理顯示的值。
處理狀態
為了有效地處理和使用 Material UI ComboBox 中的受控狀態，可以使用兩種方法：
1. 管理“值”狀態
使用“value”和“onChange”props 組合來控制 ComboBox 的選擇值。“value”prop 保持當前選擇的值，“onChange”prop 處理使用者選擇新值時的事件。
語法
import React, { useState } from 'react';
import { Autocomplete, TextField } from '@mui/material';
const MyComboBox = () => {
const [selectedValue, setSelectedValue] = useState(null);
const handleValueChange = (event, newValue) => {
setSelectedValue(newValue);
};
return (
<Autocomplete
id="combo-box"
options={options}
value={selectedValue}
onChange={handleValueChange}
getOptionLabel={(option) => option.label}
renderInput={(params) => <TextField {...params} label="Select an option" />}
/>
);
};
2. 管理“輸入值”狀態
使用“inputValue”和“onInputChange”props 組合來控制 ComboBox 文字框中顯示的值。“inputValue”prop 保持文字框中當前顯示的值，“onInputChange”prop 處理使用者輸入新值時的事件。
語法
import React, { useState } from 'react';
import { Autocomplete, TextField } from '@mui/material';
const MyComboBox = () => {
const [inputValue, setInputValue] = useState('');
const handleInputChange = (event, newInputValue) => {
setInputValue(newInputValue);
};
return (
<Autocomplete
id="combo-box"
options={options}
inputValue={inputValue}
onInputChange={handleInputChange}
getOptionLabel={(option) => option.label}
renderInput={(params) => <TextField {...params} label="Select an option" />}
/>
);
};
示例 1
下面的示例演示了在 React MUI 中的自動完成組合框中使用 value 或 onchange prop 來管理受控狀態。
import React, { useState } from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
export default function App() {
const [selectedValue, setSelectedValue] = useState(null);
const handleValueChange = (event, newValue) => {
setSelectedValue(newValue);
};
return (
<div
style={{
display: "flex",
marginTop: 40,
flexDirection: 'column',
alignItems: "center",
justifyContent: "center",
}}>
<Autocomplete
id="combo-box-programming"
value={selectedValue}
onChange={handleValueChange}
options={data}
sx={{ width: 400 }}
renderInput={(params) => (
<TextField {...params} label="Programming Languages" />
)}
/>
<div>
{selectedValue ? (
<p>Selected Language: <strong>{selectedValue.label}</strong></p>
) : (
<p>No language.</p>
)}
</div>
</div>
);
}
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" },
];
輸出
示例 2
下面的示例演示了在 React MUI 中的自動完成組合框中使用 inputValue 或 onInputChange prop 來管理受控狀態。
import React, { useState } from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
export default function App() {
const [inputValue, setInputValue] = useState('');
const handleInputChange = (event, newInputValue) => {
setInputValue(newInputValue);
};
return (
<div
style={{
display: "flex",
marginTop: 40,
flexDirection: 'column',
alignItems: "center",
justifyContent: "center",
}}>
<Autocomplete
id="combo-box-programming"
inputValue={inputValue}
onInputChange={handleInputChange}
options={data}
sx={{ width: 400 }}
renderInput={(params) => (
<TextField {...params} label="Programming Languages" />
)}
/>
<div>
{inputValue ? (
<p>Selected Language: <strong>{inputValue}</strong></p>
) : (
<p>No language.</p>
)}
</div>
</div>
);
}
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" },
];
輸出
結論
Material UI ComboBox 中的受控狀態為開發人員提供了一種強大的機制來建立響應式和互動式使用者介面。透過獨立地控制“值”和“輸入值”狀態，開發人員可以獲得更好的自定義和與應用程式狀態的同步。理解受控元件和不受控元件之間的細微差別是做出明智設計決策的關鍵方面。
利用 Material UI ComboBox 中的受控狀態可以提升 React 專案的使用者體驗。使用受控元件不僅可以保證更流暢的使用者流程，還可以建立一個更可維護和可擴充套件的程式碼庫。隨著您對受控狀態的探索深入，您將發現為心愛的使用者建立更直觀和引人入勝的 ComboBox 互動的無限可能性。
77 次檢視
