数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 Material UI 中分组复选框？
Material UI是一个React组件库，提供各种预先设计和可定制的UI组件。在创建需要用户从选项菜单中选择项目的表单或应用程序时，复选框作为必不可少的UI组件发挥着作用。
在本文中，我们将学习如何在Material UI中分组复选框。复选框分组在获得更好的用户体验、出色的用户界面和管理多项选择等方面都有帮助。
在继续本文之前，创建React项目并将Material UI添加到项目中是前提条件。让我们开始学习如何在Material UI中完整设置不确定状态。
复选框分组步骤
要分组复选框，您可以将它们组织在一起以增强其吸引力并改善整体用户体验。分组允许用户从一个类别中选择一个或多个选项，使他们更容易理解并做出选择。下面，我们概述了使用React在Material UI中分组复选框的分步过程。
步骤 1：创建一个新的React应用程序并安装MUI
首先，让我们从创建一个React应用程序和安装Material UI开始。请按照以下步骤操作：
打开您的终端并运行以下命令：
npx create react app chkproject
项目创建后，通过运行以下命令导航到项目目录：
cd chkproject
通过运行以下命令安装Material UI及其依赖项：
npm install @mui/material @emotion/react @emotion/styled
步骤 2：将所需的组件导入React
现在，当创建新的React应用程序时，在src文件夹中有一个主要的App.js文件。打开它并导入所需的组件。
import React from "react";
import { FormControlLabel, Checkbox } from '@mui/material
步骤 3：定义状态
现在，我们首先需要定义用于管理多个复选框选择的状态。
const [state, setState] = useState({
state1: false,
state2: false,
state3: false,
});
步骤 4：创建函数
接下来，我们需要创建一个函数来处理复选框的更改。
const handleGrouping = (e) => {
setState({
...state,
[e.target.name]: e.target.checked,
});
};
现在我们已经完成了所有步骤，可以使用React中的Material UI来分组复选框。让我们探索一些说明实现此目标方法的示例。
FormGroup API
<FormGroup> API充当复选框的容器，允许我们对选择控制组件进行分组。
属性
classes − 此属性允许覆盖或向元素添加样式。
children − 此属性定义复选框组件的内容或子元素。
sx − 使用此属性可将自定义样式应用于Material UI组件
row − 使用此属性，您可以紧凑地在一行中排列复选框元素。
示例
在此示例中，我们使用FormGroup组件对三个基本复选框进行了分组。在这里，复选框的标签也使用FormContolLabel组件添加，该组件也呈现复选框。
import { FormControlLabel, FormGroup } from "@mui/material";
import Checkbox from "@mui/material/Checkbox";
import React from "react";
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: 10,
}}>
<FormGroup>
<FormControlLabel
control={<Checkbox />}
label="Item 1"
color="success"
/>
<FormControlLabel
control={<Checkbox />}
label="Item 2"
color="success"
/>
<FormControlLabel
control={<Checkbox />}
label="Item 3"
color="success"
/>
</FormGroup>
</div>
);
}
输出
示例
在此示例中，我们利用FormGroup组件组织了四个复选框。此外，我们还加入了FormContolLabel组件，为每个复选框添加标签。通过实现此代码，每当用户通过单击与这些复选框交互时，其选中状态将相应更改。更新checkedItems状态。选中复选框时，状态中的相应值将标记为true。取消选中时，将标记为false。
import { FormControlLabel, FormGroup } from "@mui/material";
import Checkbox from "@mui/material/Checkbox";
import React from "react";
export default function App() {
const [state, setState] = React.useState({
chkItemOne: false,
chkItemTwo: false,
chkItemThree: false,
chkItemFour: false,
});
const handleGrouping = (e) => {
setState({
...state,
[e.target.name]: e.target.checked,
});
};
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: 10,
}}>
<FormGroup>
<FormControlLabel
control={<Checkbox color="success" />}
label="Item 1"
checked={state.chkItemOne}
onChange={handleGrouping}
name="chkItemOne"
/>
<FormControlLabel
control={<Checkbox color="success" />}
label="Item 2"
checked={state.chkItemTwo}
onChange={handleGrouping}
name="chkItemTwo"
/>
<FormControlLabel
control={<Checkbox color="success" />}
label="Item 3"
checked={state.chkItemThree}
onChange={handleGrouping}
name="chkItemThree"
/>
<FormControlLabel
control={<Checkbox color="success" />}
label="Item 4"
checked={state.chkItemFour}
onChange={handleGrouping}
name="chkItemFour"
/>
</FormGroup>
</div>
);
}
输出
示例
在此示例中，我们使用FormGroup组件创建了两组，每组四个复选框。提供的代码包含两组。第一组显示所选项目，而第二组要求用户选择三个项目。当用户选中或取消选中项目时，选择的状体将相应更新。但是，如果用户未能在一组中选择三个项目，则会显示错误消息。
import { FormControl, FormControlLabel, FormGroup, FormLabel } from "@mui/material";
import Checkbox from "@mui/material/Checkbox";
import React from "react";
export default function App() {
const [state, setState] = React.useState({
chkItemOne: false,
chkItemTwo: false,
chkItemThree: false,
chkItemFour: false,
});
const handleGrouping = (e) => {
setState({
...state,
[e.target.name]: e.target.checked,
});
};
const { chkItemOne, chkItemTwo, chkItemThree, chkItemFour } = state;
const showError = [chkItemOne, chkItemTwo, chkItemThree, chkItemFour ].filter((v) => v).length !== 3;
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: 10,
}}>
<FormControl component="fieldset" variant="outlined">
<h4>Items you've selected</h4>
<FormGroup>
<FormControlLabel
control={
<Checkbox checked={chkItemOne} onChange={handleGrouping} name="chkItemOne" />
}
label="Item 1"
/>
<FormControlLabel
control={
<Checkbox checked={chkItemTwo} onChange={handleGrouping} name="chkItemTwo" />
}
label="Item 2"
/>
<FormControlLabel
control={
<Checkbox checked={chkItemThree} onChange={handleGrouping} name="chkItemThree" />
}
label="Item 3"
/>
<FormControlLabel
control={
<Checkbox checked={chkItemFour} onChange={handleGrouping} name="chkItemFour" />
}
label="Item 4"
/>
</FormGroup>
</FormControl>
<FormControl
required
error={showError}
component="fieldset"
variant="outlined">
<FormLabel >Select any three</FormLabel>
<FormGroup>
<FormControlLabel
control={
<Checkbox checked={chkItemOne} onChange={handleGrouping} name="chkItemOne" />
}
label="Item 1"
/>
<FormControlLabel
control={
<Checkbox checked={chkItemTwo} onChange={handleGrouping} name="chkItemTwo" />
}
label="Item 2"
/>
<FormControlLabel
control={
<Checkbox checked={chkItemThree} onChange={handleGrouping} name="chkItemThree" />
}
label="Item 3"
/>
<FormControlLabel
control={
<Checkbox checked={chkItemFour} onChange={handleGrouping} name="chkItemFour" />
}
label="Item 4"
/>
</FormGroup>
</FormControl>
</div>
);
}
输出
结论
在Material UI中，我们可以对复选框进行分组，以帮助组织选项并增强用户体验。本文提供了有关如何在Material UI中分组复选框的分步说明。按照这些说明，您将能够使用Material UI的组件在React应用程序中创建和管理复选框组。我们将探讨分组复选框的示例，包括在管理状态的同时选择复选框，以及在没有状态的情况下进行选择。在处理表单、筛选选项或用户需要从选项列表中进行选择的任何情况下，复选框都特别方便。
807 次浏览
