React MUI FilledInput API

React MUI FilledInput API

Material-UIMUI 是一个提供预定义的强大和可自定义组件的UI库,用于简化React的网页开发。MUI设计基于Google的Material Design。

在本文中,我们将讨论 React MUI FilledInput API 。FilledInput元素允许我们在网页上放置带有必需ID和其他类的输入元素。API提供了许多功能,我们将学习如何实现它们。

导入FilledInput API

import FilledInput from '@mui/material/FilledInput';
// or
import {FilledInput} from "@mui/material";
JavaScript

属性: 此组件的所有可用属性。

  • autoComplete(string): 它可以通过一些预定义的或以前使用过的值快速填写表单。
  • autoFocus(bool): 如果设置为true,输入元素会自动聚焦。默认值为false。
  • classes(object): 它覆盖或扩展组件的样式。
  • color(’primary’ | ‘secondary’ | string): 组件的颜色。默认值为’primary’。
  • components({ Input?, Root? }): 用于设置每个插槽内使用的组件。
  • componentsProps(props): 用于应用插槽组件的props。已弃用,请使用slotProps代替。
  • defaultValue (任意类型): 用于设置输入元素的默认值。
  • disabled (布尔类型): 如果设置为true,则禁用输入元素。默认值为false。
  • disableUnderline (布尔类型): 如果设置为true,则输入框不会有下划线。默认值为false。
  • endAdornment (元素类型): 该组件的末尾输入附件。
  • error (布尔类型): 如果设置为true,则输入框会提示错误。默认值为false。
  • fullWidth(布尔类型):如果设置为true,则输入会占用整个宽度。默认值为false。
  • hiddenLabel(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,则自动调整文本区域的大小,默认值为 false。
  • name (string): 输入元素的名称。
  • onChange (function): 当输入框内的值改变时调用的函数。
  • placeholder (string): 设置输入框中显示的提示信息。如果设置为true,用户只能读取输入值。默认值为false。
  • required (布尔值):如果设置为true,输入元素不能为空。
  • rows (数字):当multiline设置为true时,显示的行数。
  • slotProps(props) :用于应用slot组件的props。
  • sx (Array | function | object):该系统属性允许定义系统覆盖以及额外的CSS样式。
  • type (字符串):
    • type (任意): 用于设置输入元素的类型。默认值为 ‘text’。
    • value (任意): 输入元素的值。

CSS规则:

  • root ( .MuiFilledInput-root): 应用于根元素的样式。
  • colorSecondary (.MuiFilledInput-colorSecondary): 如果颜色为secondary,则应用于根元素的样式。
  • underline ( .MuiFilledInput-underline): 除非disableUnderline设置为true,否则应用于根元素的样式。
  • focused (.Mui-focused): 如果组件处于聚焦状态,则应用于根元素的样式。
  • disabled (.Mui-disabled): 如果disabled设置为true,则应用于根元素的样式。
  • adornedStart (.MuiFilledInput-adornedStart ): 如果提供了startAdornment,则应用于根元素的样式。
  • adornedEnd (.MuiFilledInput-adornedEnd ): 如果提供了endAdornment,则应用于根元素的样式。
  • error (.Mui-error): 如果error为true,则应用于根元素的样式。
  • sizeSmall ( .MuiFilledInput-sizeSmall): 如果大小为small,则应用于输入元素的样式。
  • multiline ( .MuiFilledInput-multiline): 如果multiline为true,则应用于根元素的样式。
  • hiddenLabel ( .MuiFilledInput-hiddenLabel): 如果hiddenLabel为true,则应用于根元素的样式。
  • input ( .MuiFilledInput-input): 应用于输入元素的样式。
  • inputSizeSmall (.MuiFilledInput-inputSizeSmall): 如果大小为small,则应用于输入元素的样式。
  • inputHiddenLabel (.MuiFilledInput-inputHiddenLabel): 如果在,则应用于输入元素的样式。
  • inputMultiline (.MuiFilledInput-inputMultiline): 如果multiline为true,则应用于输入元素的样式。
  • inputAdornedStart (.MuiFilledInput-inputAdornedStart): 如果提供了startAdornment,则应用于输入元素的样式。
  • inputAdornedEnd (.MuiFilledInput-inputAdornedEnd): 如果提供了endAdornment,则应用于输入元素的样式。

语法: 如下所示创建一个FilledInput元素:

<FilledInput
    value={values.username}
    onChange={handleChange("username")}
/>
JavaScript

安装和创建React应用,并添加MUI依赖:

步骤1: 使用以下命令创建一个React应用:

npx create-react-app foldername
JavaScript

步骤2: 在创建您的项目文件夹(即foldername)后,使用以下命令进入该文件夹:

cd foldername
JavaScript

步骤3: 创建 ReactJS 应用程序后,使用以下命令安装所需的 MUI 依赖项:

npm install @mui/material @emotion/react @emotion/styled @mui/icons-material
JavaScript

项目结构: 它会像下面这样子。

React MUI FilledInput API

现在让我们来看一些示例,演示如何在react中使用MUI的FilledInput组件。

示例1: 在下面的示例中,我们使用FilledInput组件创建了一个登录表单。

App.js

import "./App.css";
import * as React from "react";
import Box from "@mui/material/Box";
import IconButton from "@mui/material/IconButton";
import FilledInput from "@mui/material/FilledInput";
import InputLabel from "@mui/material/InputLabel";
import InputAdornment from "@mui/material/InputAdornment";
import FormControl from "@mui/material/FormControl";
import Visibility from "@mui/icons-material/Visibility";
import VisibilityOff from "@mui/icons-material/VisibilityOff";
import { Button, Typography } from "@mui/material";
 
function App() {
    const [values, setValues] = React.useState({
        username: "",
        password: "",
        showPassword: false,
    });
 
    const handleChange = (prop) => (event) => {
        setValues({ ...values, [prop]: event.target.value });
    };
 
    const handleClickShowPassword = () => {
        setValues({
            ...values,
            showPassword: !values.showPassword,
        });
    };
 
    const handleMouseDownPassword = (event) => {
        event.preventDefault();
    };
 
    const handleFormSubmit = (event) => {
        event.preventDefault();
        alert("Signed in successfully");
    };
 
    return (
        <div className="App">
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <Typography
                    variant="h3"
                    sx={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </Typography>
                <Typography variant="p" fontWeight={600}>
                    React MUI FilledInput API
                </Typography>
            </div>
            <br />
            <Box
                component="form"
                onSubmit={handleFormSubmit}
                sx={{
                    width: "fit-content",
                    margin: "auto",
                    display: "flex",
                    flexDirection: "column",
                    gap: "10px",
                    maxWidth: "300px",
                }}
            >
                <FormControl fullWidth variant="filled">
                    <InputLabel htmlFor="filled-adornment-username">
                        Username
                    </InputLabel>
                    <FilledInput
                        id="filled-adornment-amount"
                        value={values.username}
                        onChange={handleChange("username")}
                        startAdornment={<InputAdornment 
                        position="start">@</InputAdornment>}
                        required
                    />
                </FormControl>
                <FormControl variant="filled">
                    <InputLabel htmlFor="filled-adornment-password">
                        Password
                    </InputLabel>
                    <FilledInput
                        id="filled-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>
                        }
                        required
                    />
                </FormControl>
                <Button type="submit" variant="contained">
                    Sign in
                </Button>
            </Box>
        </div>
    );
}
export default App;
JavaScript

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

“`javascript npm run start

<pre><code class="line-numbers">**输出:** 现在打开你的浏览器并访问 http://localhost:3000/,你将看到以下输出:

![React MUI FilledInput API](https://static.deepinout.com/geekdocs/2024/01/04/20240104090833-2.gif "React MUI FilledInput API")

**示例2:** 在下面的示例中,我们将看到使用FilledInput组件进行多行输入。

**App.js**

“`javascript
import “./App.css”;
import * as React from “react”;
import Box from “@mui/material/Box”;
import FilledInput from “@mui/material/FilledInput”;
import InputLabel from “@mui/material/InputLabel”;
import FormControl from “@mui/material/FormControl”;
import { Button, Typography } from “@mui/material”;
 
function App() {
    const [values, setValues] = React.useState({
        comment: “”,
    });
 
    const handleChange = (prop) => (event) => {
        setValues({ …values, [prop]: event.target.value });
    };
 
    const handleFormSubmit = (event) => {
        event.preventDefault();
        alert(“Signed in successfully”);
    };
 
    return (
        <div className=”App”>
            <div
                className=”head”
                style={{
                    width: “fit-content”,
                    margin: “auto”,
                }}
            >
                <Typography
                    variant=”h3″
                    sx={{
                        color: “green”,
                    }}
                >
                    GeeksforGeeks
                </Typography>
                <Typography variant=”p” fontWeight={600}>
                    React MUI FilledInput API
                </Typography>
            </div>
            <br />
            <Box
                component=”form”
                onSubmit={handleFormSubmit}
                sx={{
                    width: “100%”,
                    margin: “auto”,
                    display: “flex”,
                    flexDirection: “column”,
                    gap: “10px”,
                    maxWidth: “300px”,
                }}
            >
                <FormControl fullWidth variant=”filled”>
                    <InputLabel htmlFor=”comment”>Comment</InputLabel>
                    <FilledInput
                        id=”comment”
                        value={values.comment}
                        onChange={handleChange(“comment”)}
                        required
                        fullWidth
                        multiline
                        maxRows={5}
                        minRows={3}
                    />
                </FormControl>
                <Button type=”submit” variant=”contained”>
                    Post
                </Button>
            </Box>
        </div>
    );
}
export default App;

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

npm run start
JavaScript

输出: 现在打开你的浏览器,前往 http://localhost:3000/,你将看到以下输出:

React MUI FilledInput API

参考: https://mui.com/material-ui/api/filled-input/

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

登录

注册