React MUI FormControl API

MUI或Material-UI是一个UI库，为React提供了预定义的强大和可定制的组件，以便更轻松地进行Web开发。 MUI的设计基于谷歌的Material Design。

在本文中，我们将讨论React MUI FormControl API。FormControl帮助为表单输入提供上下文，例如填充、聚焦、错误或必填。

导入FormControl API：

import FormControl from '@mui/material/FormControl';
// or
import { FormControl } from '@mui/material';

FormControl 属性：

children: 它表示组件的内容。
classes: 它帮助覆盖应用于组件的样式。
component: 用于根节点的组件。可以是一个字符串表示HTML元素或一个组件。
color: 设置组件的颜色。
disabled: 布尔值。确定是否在禁用状态下显示标签、输入和帮助文本。默认为false。
error: 布尔值。确定是否在错误状态下显示标签。默认为false。
fullWidth: 布尔值。确定组件是否应占用其容器的全部宽度。默认为false。
hiddenLabel: 布尔值。确定是否隐藏标签。默认为false。
size: 设置组件的大小。可以为’normal’或’small’。
focused: 布尔值。确定组件是否应使用焦点样式类。默认为false。
required: 布尔值。确定标签是否应使用required样式类。默认为false。
margin: 设置组件的边距。
sx: 一组CSS样式函数的超集。
variant: 设置组件的变体。可以使用’filled’、’outlined’或’standard’中的任一值。

CSS规则：

root(.MuiInput-root): 应用于根元素的样式。
marginNormal (.MuiFormControl-marginNormal): 如果margin=”normal”，应用于根元素的样式。
marginDense (.MuiFormControl-marginDense): 如果margin=”dense”，应用于根元素的样式。
fullWidth (.MuiFormControl-fullWidth): 如果fullWidth={true}，应用于根元素的样式。

语法：

<FormControl ></FormControl >

创建React应用程序并安装模块：

步骤1： 使用以下命令创建一个React应用程序：

npx create-react-app foldername

步骤2： 在创建项目文件夹（例如文件夹名）之后，使用以下命令进入该文件夹：

cd foldername

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

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

项目结构： 它看起来会像下面这样。

React MUI FormControl API

示例1： 在这个示例中，我们在两个FormControl组件中添加了两个输入字段。对于第一个输入字段，我们传递了fullWidth和color属性，对于第二个输入字段，我们传递了size和margin属性。

App.js

import { Input, FormControl, InputLabel } from '@mui/material'; 
  
export default function App() { 
    return ( 
        <div style={{ margin: 10 }}> 
            <h1 style={{ color: "green" }}> 
                GeeksforGeeks 
            </h1> 
            <h4>React MUI FormControl API</h4> 
  
            <FormControl fullWidth color='success'> 
                <InputLabel>Username: </InputLabel> 
                <Input /> 
            </FormControl> 
            <FormControl size="small" margin='dense'> 
                <InputLabel>Age: </InputLabel> 
                <Input /> 
            </FormControl> 
        </div> 
    ); 
}

运行应用程序的步骤： 从项目的根目录中使用以下命令运行应用程序。

npm start

输出： 现在打开你的浏览器并访问 http://localhost:3000/ ，你会看到以下输出。

React MUI FormControl API

示例2： 在这个示例中，我们使用React Hook useState创建了两个状态，分别命名为name和isBool。我们添加了一个名为onChangeHandler的函数，该函数检查输入文本是否只包含一个字母，并更改状态。将isBool传递给FormControl组件的error属性。当我们在输入字段中输入任何内容时，on-change函数onChangeHandler将被触发。

App.js

import { FormControl, InputLabel, Input } from '@mui/material'; 
import { useState } from 'react'; 
  
export default function App() { 
    const [name, setName] = useState(''); 
    const [isBool, setIsBool] = useState(false) 
  
    const onChangeHandler = (e) => { 
        setName(e.target.value) 
        if (!name.match(/^[A-Za-z\s]*$/)) { 
            setIsBool(true); 
            alert('error: allows letters only') 
        } else { 
            setIsBool(false); 
  
        } 
    } 
  
    return ( 
        <div style={{ margin: 10 }}> 
            <h1 style={{ color: "green" }}> 
                GeeksforGeeks 
            </h1> 
            <h4>React MUI FormControl API</h4> 
            <FormControl error={isBool}> 
                <InputLabel>Name: </InputLabel> 
                <Input id="my-input" onChange={onChangeHandler} /> 
            </FormControl> 
  
        </div> 
    ); 
}