API de campo de texto React MUI

React MUI es una biblioteca de interfaz de usuario que proporciona componentes robustos y personalizables predefinidos para React para facilitar el desarrollo web. El diseño de MUI se basa en la parte superior de Material Design de Google. 

En este artículo, vamos a discutir la API React MUI TextField. TextField nos permite ingresar el texto en campos de formulario como nombre, dirección, etc. La API de TextField expone muchas funciones que se pueden usar para hacer que nuestro TextField sea aún más útil y dinámico. 

Importar API de campo de texto:

import TextField from '@mui/material/TextField';
// or
import { TextField } from '@mui/material';

Lista de accesorios: aquí está la lista de diferentes accesorios utilizados con este componente. Podemos acceder a ellos y modificarlos según nuestras necesidades.

• children: Es un componente similar a la fila de la tabla.
• clases: Esto anula los estilos existentes o agrega nuevos estilos al componente.
• sx: la propiedad del sistema permite definir anulaciones del sistema, así como estilos CSS adicionales. 
• autocompletar: esto toma una string y ayuda a completar los campos automáticamente.
• autoFocus: si se establece en verdadero, TextField se enfocará automáticamente.
• color: Este es el color del ToggleButton.
• defaultValue: Es el valor por defecto del TextField.
• disabled: si se establece en verdadero, TextField se desactivará.
• error: si se establece en verdadero, la etiqueta de estado de error se desactivará.
• FormHelperTextProps: Se aplica al FormHelperText.
• fullWidth: si se establece en verdadero, TextField ocupará todo el ancho.
• helperText: Es el texto auxiliar del TextField.
• id: es la identificación del TextField de entrada utilizado para su posterior procesamiento. 
• InputLabelProps: Se aplica a la InputLabel.
• inputProps: los atributos se aplican al elemento de entrada.
• InputProps: los accesorios se aplican al elemento de entrada.
• inputRef: se utiliza para pasar la referencia al elemento de entrada.
• etiqueta: Es la etiqueta del elemento de entrada.
• margin(dense, none, normal): Aplica margen al elemento de entrada.
• maxRows: se utiliza para establecer el número máximo de filas para mostrar cuando la multilínea se establece en verdadero.
• minRows: se utiliza para establecer el número mínimo de filas que se mostrarán cuando multilínea se establece en verdadero.
• multilínea: si se establece en verdadero, la entrada puede tomar varias líneas de entrada.
• name: Es el nombre del elemento de entrada.
• onChange: es la función de devolución de llamada cuando se cambia el texto dentro de TextField.
• marcador de posición: es una breve sugerencia que se muestra en el TextField.
• requerido: si se establece en verdadero, se requiere que el campo de entrada tenga algún valor.
• filas: se utiliza para establecer el número de filas que se mostrarán cuando multilínea se establece en verdadero.
• select: si se establece en verdadero, se selecciona.
• SelectProps: Son los props aplicados al elemento Select.
• tamaño (pequeño/mediano): se utiliza para establecer el tamaño de TextField.
• type: Se utiliza para establecer el tipo de elemento de entrada.
• value: Es el valor del TextField.
• variante (relleno/delineado/estándar): Se utiliza para establecer la variante del TextField.

Sintaxis: Cree un TextField de la siguiente manera:

<TextField id="name" label="Standard" variant="standard" />

Instalar y crear la aplicación React y agregar las dependencias de MUI.

Paso 1: Cree un proyecto de reacción usando el siguiente comando.

npx create-react-app gfg_tutorial

Paso 2: Entrar en el directorio del proyecto

cd gfg_tutorial

Paso 3: instale las dependencias de MUI de la siguiente manera:

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

Paso 4: Ejecute el proyecto de la siguiente manera:

npm start

Ejemplo 1: En el siguiente ejemplo, tenemos un TextField básico para ingresar el nombre.

import * as React from 'react'
import { TextField } from '@mui/material'
  
function App() {
    return (
        <div className="App">
            <div
                className="head"
                style={{
                    width: 'fit-content',
                    margin: 'auto',
                }}
            >
                <h1
                    style={{
                        color: 'green',
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI TextField API</strong>
                <br />
                <TextField
                    id="name"
                    label="Name"
                    variant="outlined"
                    placeholder="Enter your name"
                />
            </div>
        </div>
    )
}
  
export default App

Producción:

 

Ejemplo 2: En el siguiente ejemplo, tenemos TextField que es obligatorio y tiene validación.

import * as React from 'react'
import { TextField } from '@mui/material'
import { useState } from 'react'
function App() {
    const [error, setError] = useState(true)
    return (
        <div className="App">
            <div
                className="head"
                style={{
                    width: 'fit-content',
                    margin: 'auto',
                }}
            >
                <h1
                    style={{
                        color: 'green',
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI TextField API</strong>
                <br />
                <TextField
                    required
                    error={error}
                    onChange={() => {
                        console.log(document.getElementById('name').value)
                        document.getElementById('name').value.length < 5
                            ? setError(true)
                            : setError(false)
                    }}
                    helperText={error ? 'Name should be greater than 5' : ''}
                    id="name"
                    label="Name"
                    variant="outlined"
                    placeholder="Enter your name"
                />
            </div>
        </div>
    )
}
  
export default App

Producción:

 

Referencia: https://mui.com/material-ui/api/text-field/