React MUI文本字段输入

React MUI 是一个UI库，提供了一系列功能齐全的组件，将我们自己的设计系统带到了我们可用于生产的组件中。MUI是一个用户界面库，为更快捷简单的Web开发提供了预定义和可定制的React组件，这些Material-UI组件基于Google的Material Design。

React MUI文本字段输入 是一个允许用户输入和编辑文本的文本字段。它们主要出现在表单和对话框中。

React MUI TextField变体：

基本文本框： 这是包括标签、输入、文字等的默认文本框。
表单属性： 使用required、disabled、type等表单属性以及helperText。
验证： 通过helperText属性对错误进行验证。
多行文本： 通过一个属性将文本框转化为TextareaAutosize元素。
选择框： 通过一个属性select，使文本框在内部使用Select组件。
图标： 定义用于在输入框内显示图标。
大小： 有两种可用的大小来改变输入框。
内边距： 通过一个属性来改变文本框的垂直间距。
全宽度： 可以使用一个属性使输入框占据其容器的全部宽度。
受控与非受控： 输入框可以受控或非受控。
组件： TextField由较小的组件组成，可以根据需要进行样式设置。
输入： 输入元素也可以像文本框一样用于输入。
颜色： 通过一个定义颜色的属性来改变文本框在获取焦点时的高亮颜色。
自定义： 可以根据自己的选择自定义文本框。
useFormControl： 这是一个钩子，返回父FormControl组件的上下文值。
限制： 可以对输入框进行一些限制，如收缩、浮动标签、类型或帮助文本。
与第三方输入库集成： 可以添加第三方库来格式化输入。
辅助功能： 为了使文本框可访问，输入应与标签和辅助文本相关联。
未样式化： 也可以使用未样式化的React MUI文本框版本。
API： 使用的API有<FilledInput />、<FormControl />、<FormHelperText />、<Input />、<InputAdornment />、<InputBase />、<InputLabel />、<OutlinedInput />和<TextField />。

语法：

<TextField label="Enter you input" variant="outlined" />

创建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不同大小和颜色的基本文本输入字段。

import { TextField } from "@mui/material"; 
import React from "react"; 
  
function App() { 
    return ( 
        <center> 
            <div> 
                <h1 style={{ color: "green" }}> 
                    GeeksforGeeks</h1> 
                <h2>React MUI Text Field Input</h2> 
                <div> 
                    <TextField 
                        label="Small Outlined Input"
                        variant="outlined"
                        size="small"
                        color="warning"
                        style={{ marginRight: 10 }} 
                    /> 
                    <TextField 
                        label="Normal Filled Input"
                        variant="filled"
                        color="secondary"
                        style={{ marginRight: 10 }} 
                    /> 
                    <TextField 
                        label="Normal Standard Input"
                        variant="standard"
                        color="success"
                    /> 
                </div> 
            </div> 
        </center> 
    ); 
} 
  
export default App;

输出：

React MUI文本字段输入

示例2： 下面的示例演示了使用带有图标的全宽选择组件的React MUI文本输入字段。

import React, { useState } from "react"; 
import { TextField } from "@mui/material"; 
import InputAdornment from "@mui/material/InputAdornment"; 
import { Source } from "@mui/icons-material"; 
  
const data = [ 
    { 
        value: "Stack", 
    }, 
    { 
        value: "Queue", 
    }, 
    { 
        value: "Linked List", 
    }, 
    { 
        value: "Array", 
    }, 
]; 
  
function App() { 
    const [dataStructure, setDataStructure] = useState("Array"); 
  
    const handleChange = (e) => { 
        setDataStructure(e.target.value); 
    }; 
  
    return ( 
        <center> 
            <div> 
                <h1 style={{ color: "green" }}>GeeksforGeeks</h1> 
                <h2>React MUI Text Field Input</h2> 
                <div style={{ maxWidth: "98%" }}> 
                    <TextField 
                        fullWidth 
                        select 
                        label="Select"
                        value={dataStructure} 
                        variant="outlined"
                        onChange={handleChange} 
                        SelectProps={{ 
                            native: true, 
                        }} 
                        helperText="Select a Data Structure"
                        InputProps={{ 
                            startAdornment: ( 
                                <InputAdornment position="start"> 
                                    <Source /> 
                                </InputAdornment> 
                            ), 
                        }} 
                    > 
                        {data.map((option) => ( 
                            <option key={option.value} value={option.value}> 
                                {option.value} 
                            </option> 
                        ))} 
                    </TextField> 
                    <TextField 
                        fullWidth 
                        select 
                        label="Select"
                        value={dataStructure} 
                        variant="filled"
                        style={{ marginTop: 10 }} 
                        onChange={handleChange} 
                        SelectProps={{ 
                            native: true, 
                        }} 
                        helperText="Select a Data Structure"
                        InputProps={{ 
                            startAdornment: ( 
                                <InputAdornment position="start"> 
                                    <Source /> 
                                </InputAdornment> 
                            ), 
                        }} 
                    > 
                        {data.map((option) => ( 
                            <option key={option.value}  
                                value={option.value}> 
                                {option.value} 
                            </option> 
                        ))} 
                    </TextField> 
                    <TextField 
                        fullWidth 
                        select 
                        label="Select"
                        value={dataStructure} 
                        variant="standard"
                        style={{ marginTop: 10 }} 
                        onChange={handleChange} 
                        SelectProps={{ 
                            native: true, 
                        }} 
                        helperText="Select a Data Structure"
                        InputProps={{ 
                            startAdornment: ( 
                                <InputAdornment position="start"> 
                                    <Source /> 
                                </InputAdornment> 
                            ), 
                        }} 
                    > 
                        {data.map((option) => ( 
                            <option key={option.value} 
                                value={option.value}> 
                                {option.value} 
                            </option> 
                        ))} 
                    </TextField> 
                </div> 
            </div> 
        </center> 
    ); 
} 
  
export default App;