极客教程React MUI输入API
MUI或Material-UI 是一个UI库，为React提供预定义的强大和可自定义的组件，以便更轻松地进行Web开发。MUI设计基于Google的Material Design。
在本文中，我们将讨论 React MUI输入API。 输入元素允许我们在网页上放置具有所需id和其他类的输入元素。它支持文本字段、按钮等。API提供了很多功能，我们将学习如何实现它们。
导入输入API
import Input from '@mui/material/Input';
// or
import { Input } from '@mui/material';
属性清单：
以下是与此组件一起使用的不同属性的清单。我们可以根据需要访问并修改它们。
- autoComplete(string) ：它帮助快速填写表单，可以使用预定义的或以前使用过的值。
- autoFocus(bool) ：如果设置为true，在第一次挂载时将聚焦到输入元素。默认值为false。
- classes(object) ：它覆盖或应用样式到元素。
- color(primary/secondary) ：用于设置组件的颜色。默认值为primary。
- components(Input) ：用于设置在InputBase中每个插槽使用的组件。
- componentProps(props) ：用于为Input中每个插槽应用props。
- defaultValue(any): 输入元素的默认值。
- disabled(bool): 如果设为true，输入元素将被禁用。默认值为false。
- disableUnderline(bool): 如果设为true，输入元素将没有下划线。默认值为false。
- endAdornment(node): 这是该组件的末尾InputAdornment。
- error(bool): 如果设为true，输入将显示错误。默认值为false。
- fullWidth(bool): 如果设为true，输入将占满整个宽度。默认值为false。
- id(string)
- 设置元素的id。
- inputComponent(elementType) : 用于设置输入元素的类型。默认值是input。
- inputProps(object): 用于设置输入组件的props。
- inputRef(ref): 用于传递对输入元素的引用。
- margin(dense/none): 如果设置为dense，组件将调整垂直填充。默认值是none。
- maxRows(number): 如果multiline设置为true，则用于设置最大行数。
- minRows(number): 如果multiline设置为true，则用于设置最小行数。
- multiline(bool): 如果设置为true，则TextArea会自动调整大小。默认值为false。
- name(string): 输入元素的名称。
- onChange(func): 当输入框内的值改变时使用的回调函数。
- placeholder(string): 用于设置输入元素中显示的提示。
- readOnly(bool): 如果设置为true，则用户只能读取输入的值。默认值为false。
- required(bool): 如果设置为true，则需要用户填写输入元素。
- rows(number): 当multiline设置为true时，显示的行数。
- **sx（Array
/ func / object）： ** 系统属性允许定义系统覆盖以及额外的CSS样式。 - type（string）： 用于设置输入元素的类型。默认值为文本。
- value（any）： 输入元素的值。
CSS规则：
- root(.MuiInput-root)： 这是应用于根元素的样式。
- formControl(.MuiInput-formControl)： 这是如果组件是FormControl的子元素，则应用于根元素的样式。
- focused(.Mui-focused)： 这是如果组件被选中，则应用于根元素的样式。
- disabled(.Mui-disabled)： 这是如果disabled属性设置为true，则应用于根元素的样式。
- colorSecondary(.MuiInput-colorSecondary)： 这是如果颜色设置为secondary，则应用于根元素的样式。
- underline(.MuiInput-underline)： 这是除非disableUnderline属性设置为true，否则应用于根元素的样式。
- error(.Mui-error)： 这是如果error属性设置为true，则应用于根元素的样式类。
- sizeSmall(.MuiInput-sizeSmall)： 这是如果大小设置为small，则应用于输入元素的样式。
- multiline(.MuiInput-multiline)： 这是如果multiline属性设置为true，则应用于根元素的样式。
- fullWidth(.MuiInput-fullWidth)： 这是如果fullWidth属性设置为true，则应用于根元素的样式。
- input(.MuiInput-input)： 这是应用于输入元素的样式。
- inputSizeSmall(.MuiInput-inputSizeSmall)： 这是如果大小设置为small，则应用于输入元素的样式。
- inputMultiline(.MuiInput-inputMultiline)： 这是如果multiline属性设置为true，则应用于输入元素的样式。
- inputTypeSearch(.MuiInput-inputTypeSearch)： 这是如果类型设置为search，则应用于输入元素的样式。
语法： 按以下方式创建一个Input元素：
<Input
value={values.amount}
onChange={handleChange("amount")}
/>
安装和创建React app并添加MUI依赖项：
步骤1： 使用以下命令创建一个React项目。
npx create-react-app gfg_tutorial
步骤2： 进入项目目录
cd gfg_tutorial
步骤3: 安装 MUI 依赖项如下所示：
npm install @mui/material @emotion/react
npm install @emotion/styled @mui/lab @mui/icons-material
项目结构：
项目应该如下所示：
步骤4： 按照以下方式运行项目：
npm start
示例1： 在下面的示例中，我们有一些带有修饰的输入元素。
import "./App.css";
import * as React from "react";
import Box from "@mui/material/Box";
import IconButton from "@mui/material/IconButton";
import Input from "@mui/material/Input";
import FilledInput from "@mui/material/FilledInput";
import OutlinedInput from "@mui/material/OutlinedInput";
import InputLabel from "@mui/material/InputLabel";
import InputAdornment from "@mui/material/InputAdornment";
import FormHelperText from "@mui/material/FormHelperText";
import FormControl from "@mui/material/FormControl";
import TextField from "@mui/material/TextField";
import Visibility from "@mui/icons-material/Visibility";
import VisibilityOff from "@mui/icons-material/VisibilityOff";
function App() {
const [values, setValues] = React.useState({
amount: "",
password: "",
weight: "",
weightRange: "",
showPassword: false,
});
const handleChange = (prop) => (event) => {
setValues({ ...values, [prop]: event.target.value });
};
const handleClickShowPassword = () => {
setValues({
...values,
showPassword: !values.showPassword,
});
};
const handleMouseDownPassword = (event) => {
event.preventDefault();
};
return (
<div className="App">
<div
className="head"
style={{
width: "fit-content",
margin: "auto",
}}
>
<h1
style={{
color: "green",
}}
>
GeeksforGeeks
</h1>
<strong>React MUI Input API</strong>
</div>
<br />
<Box sx={{ display: "flex", flexWrap: "wrap" }}>
<div>
<FormControl fullWidth sx={{ m: 1, width: "25ch" }}
variant="filled">
<InputLabel htmlFor="filled-adornment-amount">
Amount
</InputLabel>
<Input
id="filled-adornment-amount"
value={values.amount}
onChange={handleChange("amount")}
startAdornment={
<InputAdornment position="start">
$
</InputAdornment>
}
/>
</FormControl>
</div>
<div>
<TextField
label="Weight"
id="standard-start-adornment"
sx={{ m: 1, width: "25ch" }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
kg
</InputAdornment>
),
}}
variant="standard"
/>
<FormControl sx={{ m: 1, width: "25ch" }}
variant="standard">
<InputLabel
htmlFor="standard-adornment-password">
Password
</InputLabel>
<Input
id="standard-adornment-password"
type={values.showPassword ? "text" : "password"}
value={values.password}
onChange={handleChange("password")}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
>
{values.showPassword
? <VisibilityOff />
: <Visibility />}
</IconButton>
</InputAdornment>
}
/>
</FormControl>
</div>
</Box>
</div>
);
}
export default App;
输出：
示例2： 在下面的示例中，我们有一个全宽度输入框。
import "./App.css";
import * as React from "react";
import Box from "@mui/material/Box";
import IconButton from "@mui/material/IconButton";
import Input from "@mui/material/Input";
import FilledInput from "@mui/material/FilledInput";
import OutlinedInput from "@mui/material/OutlinedInput";
import InputLabel from "@mui/material/InputLabel";
import InputAdornment from "@mui/material/InputAdornment";
import FormHelperText from "@mui/material/FormHelperText";
import FormControl from "@mui/material/FormControl";
import TextField from "@mui/material/TextField";
import Visibility from "@mui/icons-material/Visibility";
import VisibilityOff from "@mui/icons-material/VisibilityOff";
function App() {
const [values, setValues] = React.useState({
amount: "",
password: "",
weight: "",
weightRange: "",
showPassword: false,
});
const handleChange = (prop) => (event) => {
setValues({ ...values, [prop]: event.target.value });
};
const handleClickShowPassword = () => {
setValues({
...values,
showPassword: !values.showPassword,
});
};
const handleMouseDownPassword = (event) => {
event.preventDefault();
};
return (
<div className="App">
<div
className="head"
style={{
width: "fit-content",
margin: "auto",
}}
>
<h1
style={{
color: "green",
}}
>
GeeksforGeeks
</h1>
<strong>React MUI Input API</strong>
</div>
<br />
<Box sx={{ display: "flex", flexWrap: "wrap" }}>
<div>
<TextField
label="Weight"
id="standard-start-adornment"
sx={{ m: 1, width: "25ch" }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
kg
</InputAdornment>
),
}}
variant="standard"
/>
<FormControl variant="standard"
sx={{ m: 1, mt: 0, width: "25ch" }}>
<FormHelperText id="standard-weight-helper-text">
Height
</FormHelperText>
<Input
label="Height"
id="standard-adornment-weight"
value={values.weight}
endAdornment={
<InputAdornment position="end">
cm
</InputAdornment>
}
aria-describedby="standard-weight-helper-text"
onChange={handleChange("weight")}
/>
</FormControl>
<FormControl sx={{ m: 1, width: "25ch" }}
variant="standard">
<InputLabel htmlFor="standard-adornment-password">
Password
</InputLabel>
<Input
id="standard-adornment-password"
type={values.showPassword
? "text"
: "password"}
value={values.password}
onChange={handleChange("password")}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
>
{values.showPassword
? <VisibilityOff />
: <Visibility />}
</IconButton>
</InputAdornment>
}
/>
</FormControl>
<FormControl fullWidth sx={{ m: 1 }}
variant="standard">
<InputLabel htmlFor="standard-adornment-amount">
Amount
</InputLabel>
<Input
id="standard-adornment-amount"
value={values.amount}
onChange={handleChange("amount")}
startAdornment={
<InputAdornment position="start">
$
</InputAdornment>
}
/>
</FormControl>
</div>
</Box>
</div>
);
}
export default App;
输出：
