React MUI InputUnstyled API

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

在本文中，我们将讨论 React MUI InputUnstyled API。InputUnstyled 是一个输入字段，也可以更改为文本区域，帮助用户填写和编辑信息。

InputUnstyled 属性：

autoComplete： 它帮助用户自动填充内容。
autoFocus： 它是一个布尔值。它决定输入元素在首次挂载时是否聚焦。
className： 应用于根元素的类名。
component： 组件用于根节点。可以是字符串以使用 HTML 元素或组件。
defaultValue： 定义设置的默认值。
disabled： 它是一个布尔值。它决定组件是否禁用。
endAdornment： 它表示输入的尾随修饰。
error： 它是一个布尔值。它决定辅助文本是否以错误状态显示。默认为 false。
id： 用于设置元素的 ID。
maxRows： 要显示的最大行数。
minRows： 要显示的最小行数。
multiline： 它是一个布尔值。它决定是否渲染文本区域。
name： 输入元素的名称。
placeholder： 输入元素中显示的提示信息。
readOnly： 它是一个布尔值。它决定用户是否能够更改值。
required： 它是一个布尔值。它决定用户是否必须填写此字段。
rows： 确定要显示的行数。
slotProps： 用于 Input 中每个 slot 的 props。
slots： 要在 InputBase 中使用的每个 slot，可以是字符串以使用 HTML 元素或组件。
startAdornment： 输入的前导修饰。
type： 用于设置输入元素的类型。默认值为文本。
value： 输入元素的值。

语法：

<InputUnstyled/>

创建React应用程序并安装模块：

步骤1： 使用以下命令创建React应用程序：

npx create-react-app foldername

步骤2: 创建你的项目文件夹（比如文件夹名称为foldername），使用以下命令进行切换到该文件夹：

cd foldername

步骤3： 创建完ReactJS应用程序后，使用以下命令安装所需模块：

npm install @mui/material 
npm install @emotion/react 
npm install @emotion/styled

项目结构：

它会看起来像下面这样。

React MUI InputUnstyled API

示例1： 在此示例中，我们将InputUnstyled组件添加到其中，并设置了name、id、rows、multiline和placeholder属性。

App.js

import InputUnstyled from '@mui/base/InputUnstyled'; 
  
  
export default function App() { 
  
    return ( 
        <div style={{ margin: 30 }}> 
            <h1 style={{ color: "green" }}>GeeksforGeeks</h1> 
            <h4>React MUI InputUnstyled API</h4> 
            <InputUnstyled name="input-unstyled" 
                id="input-unstyled"
                rows={5} multiline={true}  
                placeholder="Share your experiences...." /> 
        </div> 
    ); 
}

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

npm start

输出： 现在打开你的浏览器并访问 http://localhost:3000/ ，你将看到以下输出。

React MUI InputUnstyled API

示例2： 我们正在使用React Hook的useState来创建两个状态email和disable。我们创建了一个表单，当提交时触发onSubmitHandler来在alert框中显示email，并改变disabled的状态，即将其更改为true，从而使输入字段被禁用。

App.js

import InputUnstyled from '@mui/base/InputUnstyled'; 
import { useState } from 'react'; 
  
export default function App() { 
    const [email, setEmail] = useState(''); 
    const [disable, setDisable] = useState(false) 
  
    const onSubmitHandler = (e) => { 
        e.preventDefault(); 
        alert('submitted :' + email); 
        setDisable(true) 
    } 
  
    return ( 
        <div style={{ margin: 10 }}> 
            <h1 style={{ color: "green" }}>GeeksforGeeks</h1> 
            <h4>React MUI InputUnstyled API</h4> 
  
            <p>User: gfg_22</p> 
            <form onSubmit={onSubmitHandler}> 
                <InputUnstyled name="email" id="email"
                    placeholder='email' type="email"
                    onChange={(e) => setEmail(e.target.value)} 
                    disabled={disable} 
                    required={true} /> 
            </form> 
        </div> 
    ); 
}