数据结构
网络
关系数据库管理系统 (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 次查看
