React Material UI 自定义输入 hide/show 密码

Question

我正在尝试 hide/show 当用户单击眼睛图标时输入密码，但什么都没有 changes.The 默认情况下密码始终可见，我希望它始终隐藏。 [密码文字输入][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

Answer 1

如果您正在使用 useState Hook，那么您的处理程序应该如下所示：

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

IconButton 应如下所示：

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

我认为您混合了 class 组件的 setState 和功能组件的 useState。看这里：https://reactjs.org/docs/hooks-reference.html#usestate

React Material UI 自定义输入 hide/show 密码

React Material UI Custom Input hide/show password

reactjs

react-material