Как просмотреть пароль из текстового поля пользовательского интерфейса?

Question

Мой код работает правильно, и когда я пишу в поле пароля, текст скрыт. Есть ли способ добавить функцию, при которой пользователь имеет возможность просмотреть пароль, если он / она хочет?

  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>
        );
      }

Answer 1

Ну, я думаю, что-то вроде этого. Это не будет хорошо работать с несколькими полями пароля.

const [showPassword, setShowPassword] = useState(false);

const handleClick = () => {
  setShowPassword(prev => !prev);
}

return (
  <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
           InputProps={{
             endAdornment: item.type ? 'password' (
               <InputAdornment position="end">
                  <IconButton
                    onClick={handleClick}
                    edge="end"
                  >
                    {showPassword ? <Visibility /> : <VisibilityOff />}
                  </IconButton>
                </InputAdornment>
             ) : null
           }}
           id="outlined-basic"
           key={index}
           label={item.label}
           variant="outlined"
           type={showPassword ? 'text' : item.type}
           onChange= {e => item.function(e.target.value)}        
         />
         <br></br><br></br>
       </div>
      ))
    }
</form>

Answer 2

Вы можете изменить тип значения на основе некоторого истинного / ложного состояния.

// 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>
    )
  }}
/>

В вашем примере вы используете al oop до go через свое поле. Замена вашего текстового поля моим примером добавит переключатель ко всем полям. Это (вероятно) не то, что вам нужно, поэтому вам придется искать другой способ визуализации этих полей.

---

// 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";

Answer 3

Вы можете добавить кнопку «Показать» рядом с полем пароля, выбирая, какой тип входа изменяется с type=password на type=text.

Answer 4

Добавьте функцию через клик «show-pwd». Выполните следующие задачи:

1. получите текущее значение поля пароля.
2. установите тип поля пароля от «пароля» до «текста»
3. установите значение поля пароля равным выбранному вами значению (это может или не может потребоваться)