javascript - Hvordan ser man adgangskode fra Material UI tekstfelt?

Min kode fungerer korrekt, og når jeg skriver i adgangskodefeltet, er teksten skjult. Er der en måde at tilføje en funktionalitet, hvor brugeren har mulighed for at se adgangskoden, hvis han/hun ønsker det?

  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  return (
          <div>
         <div className='main-content'>
         <form className="form" noValidate autoComplete="off">
                {[{ label: "Email", state: email , type: "text", function: setEmail},
                { label: "Password", state: password , type: "password", function: setPassword},
                  ].map((item, index) => (
                  <div>
                    <TextField
                      id="outlined-basic"
                      key={index}
                      label={item.label}
                      variant="outlined"
                      type= {item.type}
                      onChange= {e => item.function(e.target.value)}        
                    />
                    <br></br><br></br>
                  </div>
                )
                )}
         </form>
         </div>
       </div>
        );
      }

Svar #1

Du kan ændre typen af værdien baseret på en sand/falsk tilstand.

// Add these variables to your component to track the state
const [showPassword, setShowPassword] = useState(false);
const handleClickShowPassword = () => setShowPassword(!showPassword);
const handleMouseDownPassword = () => setShowPassword(!showPassword);

// Then you can write your text field component like this to make the toggle work.
<TextField
  label='Some label'
  variant="outlined"
  type={showPassword ? "text" : "password"} // <-- This is where the magic happens
  onChange={someChangeHandler}
  InputProps={{ // <-- This is where the toggle button is added.
    endAdornment: (
      <InputAdornment position="end">
        <IconButton
          aria-label="toggle password visibility"
          onClick={handleClickShowPassword}
          onMouseDown={handleMouseDownPassword}
        >
          {showPassword ? <Visibility /> : <VisibilityOff />}
        </IconButton>
      </InputAdornment>
    )
  }}
/>

I dit eksempel bruger du en løkke til at gå igennem dit felt. Hvis du erstatter dit tekstfelt med mit eksempel, vil det tilføje skiftet til alle felterne. Hvilket (sandsynligvis) ikke er, hvad du ønsker, så du bliver nødt til at finde en anden måde at vise disse felter på.

// Required imports from the example.
import { TextField, InputAdornment, IconButton } from "@material-ui/core";
import Visibility from "@material-ui/icons/Visibility";
import VisibilityOff from "@material-ui/icons/VisibilityOff";

Svar #2

Du kan bruge Input-elementet fra Material UI, som giver mulighed for at tilføje et ikon i slutningen af tekstfeltet, og du kan lege med et klik på ikonet for at skjule og vise adgangskoden.

her er hvordan det ser ud:

skjult adgangskode-tilstand

vis adgangskode-tilstand

<FormControl className={clsx(classes.margin, classes.textField)}>
      <InputLabel htmlFor="standard-adornment-password">Password</InputLabel>
      <Input
        id="standard-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 ? <Visibility /> : <VisibilityOff />}
            </IconButton>
          </InputAdornment>
        }
      />
    </FormControl>

ref link: https://material-ui.com/components/text-fields/#InputAdornments.js

Relaterede artikler