La contraseña se puede mostrar al usuario agregando una característica del ícono del ojo para que el usuario pueda ver la contraseña. Material UI for React tiene este componente disponible para nosotros y es muy fácil de integrar. Podemos usar algún componente de material central en ReactJS usando el siguiente enfoque.
Creación de la aplicación React e instalación del módulo:
Paso 1: Cree una aplicación React usando el siguiente comando:
npx create-react-app foldername
Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:
cd foldername
Paso 3: después de crear la aplicación ReactJS, instale los módulos material-ui usando el siguiente comando:
npm install @material-ui/core npm install @material-ui/icons
Estructura del proyecto: Tendrá el siguiente aspecto.
Estructura del proyecto
App.js: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.
Javascript
import React from "react";
import IconButton from "@material-ui/core/IconButton";
import InputLabel from "@material-ui/core/InputLabel";
import Visibility from "@material-ui/icons/Visibility";
import InputAdornment from "@material-ui/core/InputAdornment";
import VisibilityOff from "@material-ui/icons/VisibilityOff";
import Input from "@material-ui/core/Input";
const App = () => {
const [values, setValues] = React.useState({
password: "",
showPassword: false,
});
const handleClickShowPassword = () => {
setValues({ ...values, showPassword: !values.showPassword });
};
const handleMouseDownPassword = (event) => {
event.preventDefault();
};
const handlePasswordChange = (prop) => (event) => {
setValues({ ...values, [prop]: event.target.value });
};
return (
<div
style={{
marginLeft: "30%",
}}
>
<h4>How to show and hide password in ReactJS?</h4>
<InputLabel htmlFor="standard-adornment-password">
Enter your Password
</InputLabel>
<Input
type={values.showPassword ? "text" : "password"}
onChange={handlePasswordChange("password")}
value={values.password}
endAdornment={
<InputAdornment position="end">
<IconButton
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
>
{values.showPassword ? <Visibility /> : <VisibilityOff />}
</IconButton>
</InputAdornment>
}
/>
</div>
);
};
export default App;
Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando desde el directorio raíz del proyecto.
npm start
Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida.
Publicación traducida automáticamente
Artículo escrito por gouravhammad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA