React Material UI 自定义输入隐藏/显示密码答案

【问题标题】：React Material UI Custom Input hide/show passwordReact Material UI 自定义输入隐藏/显示密码
【发布时间】：2020-10-30 21:24:23
【问题描述】：

当用户单击眼睛图标时，我试图隐藏/显示密码，但没有任何变化。默认密码始终可见，我希望它始终隐藏。 [密码文本输入][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

【问题讨论】：

const handleClickShowPassword = () => {setShowPassword({showPassword : showPassword}) }; 看起来不太正确。你也有showPassword 状态和设置器吗？
是的const [showPassword, setShowPassword] = React.useState(false);
不要忘记 handleClickShowPassword 中的 event.preventDefault()。防止页面提交和重新加载！

标签： reactjs react-material

【解决方案1】：

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

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

【讨论】：