React MUI复选框输入

React MUI 是一个UI库，提供了完全加载的组件，将我们自己的设计系统带到我们的生产就绪组件中。MUI是一个用户界面库，提供了预定义和可定制的React组件，用于更快、更容易的网络开发，这些Material-UI组件基于Google的Material Design。

在本文中，我们将讨论 React MUI复选框输入 。复选框允许用户从给定的数据集中选择一个或多个项目。它可以用来打开或关闭一个选项。

React MUI复选框属性:

checked: 它确定组件是否被选中。
checkedIcon: 它表示组件被选中时显示的图标。
classes: 它表示用于覆盖默认样式的样式。
color: 它表示组件的颜色。
defaultChecked: 它确定组件是否默认选中。
disabled: 它确定组件是否被禁用。
disableRipple: 它确定组件上的涟漪效果是否被禁用。
icon: 它表示组件未选中时显示的图标。
id: 它表示输入元素的id。
indeterminate: 它确定组件是否处于不定状态。
indeterminateIcon: 它表示组件处于不定状态时显示的图标。
inputProps: 它表示应用于输入元素的属性列表。
inputRef: 它表示传递给输入元素的ref。
onChange: 它表示当复选框的状态改变时触发的回调函数。
required: 它确定输入元素是否为必填项。
size: 它表示组件的大小。
sx: 它表示一个系统属性，允许定义系统覆盖以及额外的CSS样式。
value: 它表示组件的值。

语法:

<Checkbox {...label} defaultChecked />

创建React项目：

步骤1： 要创建一个React应用程序，你需要通过npm命令安装React模块。

npm create-react-app project name

步骤2： 创建完你的React项目后，进入文件夹执行不同的操作。

cd project name

步骤3: 创建ReactJS应用程序后，使用以下命令安装所需的模块：

npm install @mui/material @emotion/react @emotion/styled

项目结构：

React MUI复选框输入

运行应用程序的步骤：

npm start

示例1： 下面的示例演示了React MUI Checkbox，其中包含不同大小和颜色的标签。

import React from "react"; 
import FormGroup from "@mui/material/FormGroup"; 
import FormControlLabel from "@mui/material/FormControlLabel"; 
import Checkbox from "@mui/material/Checkbox"; 
  
function App() { 
    return ( 
        <div> 
            <div style={{ textAlign: "center", color: "green" }}> 
                <h1>GeeksforGeeks</h1> 
                <h2>React MUI Checkbox input</h2> 
            </div> 
            <div style={{ paddingLeft: 20 }}> 
                <FormGroup> 
                    <FormControlLabel 
                        control={<Checkbox defaultChecked  
                        size="small" 
                        color="success" />} 
                        label="Small Checkbox"
                    /> 
                    <FormControlLabel 
                        control={<Checkbox defaultChecked  
                        color="secondary" />} 
                        label="Medium Checkbox"
                    /> 
                    <FormControlLabel 
                        control={<Checkbox color="error" />} 
                        label="Large Checkbox"
                        sx={{ "& .MuiSvgIcon-root":  
                            { fontSize: 28 } }} 
                    /> 
                </FormGroup> 
            </div> 
        </div> 
    ); 
} 
  
export default App;

输出：

React MUI复选框输入

示例2： 下面的示例演示了React MUI不确定复选框。在不确定的状态下，复选框输入在表单中只能有两种状态：选中或未选中，它要么提交其值，要么不提交。如果我们从视觉上来看，一个复选框有三种状态：选中、未选中或不确定。

import React from "react"; 
import Box from "@mui/material/Box"; 
import Checkbox from "@mui/material/Checkbox"; 
import FormControlLabel from "@mui/material/FormControlLabel"; 
  
function App() { 
  
    const [checked, setChecked] = React.useState([true, false]); 
    const handleChange1 = (event) => { 
        setChecked([event.target.checked,  
            event.target.checked]); 
    }; 
    const handleChange2 = (event) => { 
        setChecked([event.target.checked, checked[1]]); 
    }; 
    const handleChange3 = (event) => { 
        setChecked([checked[0], event.target.checked]); 
    }; 
  
    const children = ( 
        <Box sx={{ display: "flex",  
            flexDirection: "column", ml: 3 }}> 
            <FormControlLabel 
                label="Child Element 1"
                control={<Checkbox checked={checked[0]}  
                onChange={handleChange2} color="success" />} 
            /> 
            <FormControlLabel 
                label="Child Element 2"
                control={<Checkbox checked={checked[1]}  
                onChange={handleChange3} color="success" />} 
            /> 
        </Box> 
    ); 
    return ( 
        <div> 
            <div style={{ textAlign: "center", color: "green" }}> 
                <h1>GeeksforGeeks</h1> 
                <h2>React MUI Checkbox input</h2> 
            </div> 
            <div style={{ paddingLeft: 20 }}> 
                <FormControlLabel 
                    label="Parent Element"
                    control={ 
                        <Checkbox 
                            checked={checked[0] && checked[1]} 
                            indeterminate={checked[0] !== checked[1]} 
                            onChange={handleChange1} 
                            color="success"
                        /> 
                    } 
                /> 
                {children} 
            </div> 
        </div> 
    ); 
} 
  
export default App;

输出:

React MUI复选框输入