极客教程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
项目结构：
运行应用程序的步骤：
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;
输出：
示例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;
输出：
参考： https://mui.com/material-ui/react-text-field