Пользовательский ввод React Material UI скрыть/показать пароль

Я пытаюсь скрыть/показать пароль, когда пользователь нажимает на значок глаза, но ничего не меняется. По умолчанию пароль всегда виден, я хочу, чтобы он всегда был скрыт. [ввод текста пароля][1]

Мои функции выглядят так

const [password, setPassword] = React.useState("");
const handleClickShowPassword = () => {setShowPassword({showPassword : showPassword}) };
const handleMouseDownPassword = () => {setShowPassword({showPassword : showPassword}) };

Мой код ввода текста выглядит так

                      <CustomInput
                        labelText="Password"
                        id="pass"
                        value={password}
                        type={showPassword ? 'text' : 'password'}
                        formControlProps={{
                          fullWidth: true
                        }}
                        inputProps={{
                          onChange: (event) => {
                            const value = event.target.value;
                            setPassword(value)
                          },
                          endAdornment: (
                            <InputAdornment position="end">
                              <IconButton
                                aria-label="toggle password visibility"
                                onClick={handleClickShowPassword}
                                onMouseDown={handleMouseDownPassword}
                                >
                                  {showPassword ? <Visibility /> : <VisibilityOff />}
                              </IconButton>
                            </InputAdornment>
                          ),
                          autoComplete: "off"
                        }}
                      />
                      {
                            password === ""?
                            <p style={{color:"#D0021B"}}>{passworderror}</p>
                            :null
                          }
                          <p style={{color:"#D0021B"}}>{passwordexist}</p>
                          
                    </GridItem>  


  [1]: https://i.stack.imgur.com/litjB.png

reactjs react-material
person shiro    schedule 10.07.2020    source источник
comment
const handleClickShowPassword = () => {setShowPassword({showPassword : showPassword}) }; не совсем соответствует действительности. У вас также есть состояние showPassword и сеттер?   -  person Drew Reese    schedule 10.07.2020
comment
да const [showPassword, setShowPassword] = React.useState(false);   -  person shiro    schedule 10.07.2020
comment
не забудьте event.preventDefault() в handleClickShowPassword. Чтобы страница не отправлялась и не перезагружалась!   -  person Andrew Irwin    schedule 21.10.2020

Ответы (1)


arrow_upward
2
arrow_downward

Если вы используете хук useState, ваш обработчик должен выглядеть так:

const handleTogglePassword = () => setShowPassword(showPassword => !showPassword);

и IconButton должен выглядеть так:

<IconButton
  aria-label="toggle password visibility"
  onClick={handleTogglePassword}
>
   {showPassword ? <Visibility /> : <VisibilityOff />}
</IconButton>

Я думаю, вы смешали setState для компонентов класса и useState для функциональных компонентов. Посмотрите здесь: https://reactjs.org/docs/hooks-reference.html#usestate

person Jan Höck    schedule 10.07.2020