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

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

0 голосов
/ 10 июля 2020

Я пытаюсь скрыть / показать пароль, когда пользователь щелкает значок глаза, но ничего не меняется. По умолчанию пароль отображается всегда, я хочу, чтобы он всегда был скрыт. [ввод текста пароля] [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

1 Ответ

1 голос
/ 10 июля 2020

Если вы используете хук 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

...