React MUI FormHelperText API

MUI或Material-UI是一个提供预定义的强大和可自定义的React组件的UI库，用于更轻松的Web开发。MUI设计基于Google的Material Design。

在本文中，我们将讨论React MUI FormHelperText API。FormHelperText用于在表单中为用户添加与输入字段相关的附加文本。

导入FormHelperText API：

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

FormHelperText Props:

children: 它表示组件的内容。
classes: 它用于覆盖应用于组件的样式。
component: 用于根节点的组件。可以是字符串以使用HTML元素或组件。
disabled: 它是一个布尔值。它确定是否应以禁用状态显示帮助文本。默认为false。
error: 它是一个布尔值。它确定是否应以错误状态显示帮助文本。默认为false。
filled: 它是一个布尔值。它确定是否应使用填充的classes key。默认为false。
focused: 它是一个布尔值。它确定是否应使用聚焦的classes key。默认为false。
required: 它是一个布尔值。它确定是否应使用必需的class key。默认为false。
margin: 为 FormHelperText 设置边距，相对于 FormControl。
sx: CSS的超集，将所有样式函数打包在一起。
variant: 设置组件的变体。可以使用“filled”，“outlined”，“standard”或“string”中的任何一个值。

CSS Rules:

root(.MuiInput-root): 应用于根元素的样式。
error(.Mui-error): 如果错误设置为true，则应用于根元素的样式类。
disabled(.Mui-disabled): 如果禁用设置为true，则应用于根元素的样式。
sizeSmall(.MuiInput-sizeSmall): 如果大小设置为small，则应用于输入元素的样式。
contained( .MuiFormHelperText-contained): 如果variant=”filled”或variant=”outlined”，则应用于根元素的样式。
focused(.Mui-focused): 如果组件聚焦，则应用于根元素的样式。
filled( .MuiFormHelperText-filled): 如果filled设置为true，则应用于根元素的样式。
required(.Mui-required): 如果禁用设置为true，则应用于根元素的样式。

语法:

<FormHelperText></FormHelperText>

创建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 FormHelperText API

示例1： 在这个示例中，我们添加了两个输入字段，并且还添加了FormHelperText。对于第一个FormHelperText组件，我们传递了id =“username-helper”，对于第二个组件，我们添加了id =“country-helper”，还添加了disabled属性。

App.js

import { FormHelperText, FormControl, Input } from '@mui/material'; 
  
export default function App() { 
    return ( 
        <div style={{ margin: 30 }}> 
            <h1 style={{ color: "green" }}>GeeksforGeeks</h1> 
            <h4> React MUI  FormHelperText API </h4> 
            <FormControl> 
                <label>Username :</label> 
                <Input id="user" /> 
                <FormHelperText id="username-helper"> 
                    must be more than 5 characters 
                </FormHelperText> 
                <label>Country :</label> 
                <Input id="country" disabled /> 
                <FormHelperText id="country-helper" disabled > 
                    disabled field 
                </FormHelperText> 
            </FormControl> 
        </div> 
    ); 
}

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

npm start

输出： 现在打开您的浏览器，转到 http://localhost:3000/ ，您将看到以下输出。

React MUI FormHelperText API

示例2： 在这个示例中，我们使用React Hook useState 创建了三个状态，分别命名为val、selectBool和helperText。我们添加了一个名为onHandleChange的函数，该函数检查当前输入字符串的长度并改变状态。我们将selectBool传递给FormHelperText组件的error属性。当我们在输入框中输入时，on-change函数onHandleChange会被触发。

App.js

import { useState } from 'react'; 
import { FormHelperText, FormControl, Input } 
    from '@mui/material'; 
  
export default function App() { 
    const [val, setVal] = useState("") 
    const [selectBool, setSelectBool] = useState(false); 
    const [helperText, setHelperText] = 
        useState(" username must be more than 9 characters") 
  
    const onHandleChange = (e) => { 
        setVal(e.target.value); 
        if (val.length > 9) { 
            setSelectBool(false) 
            setHelperText("correct") 
        } 
        else { 
            setSelectBool(true) 
            setHelperText( 
                "error: must be more than 9 characters") 
        } 
    }; 
    return ( 
        <div style={{ margin: 30 }}> 
            <h1 style={{ color: "green" }}>GeeksforGeeks</h1> 
            <h4> React MUI FormHelperText API </h4> 
            <FormControl> 
                <label>Username :</label> 
                <Input id="user" onChange={onHandleChange} 
                    value={val} /> 
                <FormHelperText id="username-helper"
                    error={selectBool}>{helperText} 
                </FormHelperText> 
            </FormControl> 
        </div> 
    ); 
}

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