¿Cómo convertir valores de LowerCase a UpperCase en el campo de entrada usando ReactJS?

A veces vemos que incluso escribimos en minúsculas en los campos del formulario pero automáticamente se convierten en mayúsculas. Hoy lograremos esa funcionalidad en este artículo.

Dada un área de texto de entrada y la tarea es transformar los caracteres en minúsculas en caracteres en mayúsculas mientras recibe la entrada del usuario. Se puede hacer usando React.

Acercarse:

• Usando el detector de eventos, cambiaremos los valores de minúsculas a mayúsculas.
• Cuando el usuario comienza a escribir, se crea un evento onChange, estamos actualizando el estado del valor con el valor de mayúsculas del valor ingresado usando la función toUpperCase().
• Este valor actualizado se refleja en el formulario después de que el usuario complete su entrada.

Función utilizada:

toUpperCase()

Convierte valores de string de minúsculas a mayúsculas.

Creando la aplicación React:

Paso 1: ejecute Crear aplicación de reacción usando el siguiente comando.

npx create-react-app my-first-app

Paso 2: cambie el directorio a esa carpeta ejecutando el comando:

cd my-first-app

Paso 3: Instale las siguientes dependencias.

npm install react
npm install useState

Estructura del proyecto:

Paso 4: Importación del componente <CapitalLetter /> en el componente raíz.

Nombre de archivo: App.js

function App() {
  return (
      
    <div className="App">
        
  <CapitalLetter/>
    </div>
  );
}
  
export default App;

Paso 5: Usando el detector de eventos, cambiaremos los valores de minúsculas a mayúsculas.

Nombre del archivo: CapitalLetter.jsx

import React, { useState } from 'react'
function CapitalLetter()
{
    const[username,setUsername]=useState('');
    const handleInput=(event)=>{
        event.preventDefault();
        setUsername(event.target.value);
          
    }
    const changeCase=(event)=>{
        event.preventDefault();
        setUsername(event.target.value.toUpperCase());
    }
    return(
       <div>
           <div class="container">
      <h1>Sign In</h1>
      <form method="post" class="-group form-group">
          
          <label for="username">Username:</label>
          <input type="text" name="username" id="username" value={username} 
          onChange={handleInput}
         onMouseEnter={changeCase}>
       </input>
          <label for="password">Password:</label>
          <input type="password" name="password" id="password" />
          <i class="bi bi-eye-slash" id="togglePassword"></i>
        <br></br>
        <button type="submit" id="submit" class="btn btn-primary">
            Log In
        </button>
      </form>
    </div>
       </div>
    )
}
  
export default CapitalLetter;

Paso para ejecutar la aplicación: Ejecute el siguiente comando en la terminal.

npm start

Salida: Escriba localhost:3000 en el navegador