如何从 Material UI 文本字段中查看密码？答案

【问题标题】：How to View Password from Material UI Textfield?如何从 Material UI 文本字段中查看密码？
【发布时间】：2020-06-08 23:31:24
【问题描述】：

我的代码工作正常，当我在密码字段中写入时，文本被隐藏。有没有办法添加一个功能，让用户可以选择查看密码（如果他/她愿意）？

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

【问题讨论】：

标签： javascript html reactjs typescript material-ui

【解决方案1】：

您可以在密码字段旁边添加一个“显示”按钮，选择输入类型从type=password 更改为type=text。

【讨论】：

【解决方案2】：

嗯，我猜是这样的。它不适用于多个密码字段。

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>

【讨论】：

【解决方案3】：

您可以根据某些真/假状态更改值的类型。

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

在您的示例中，您使用循环遍历您的字段。用我的示例替换您的文本字段会将切换添加到所有字段。这（可能）不是您想要的，因此您必须找到一种不同的方式来呈现这些字段。

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

【讨论】：

通过标签导航卡在图标按钮上。解决方案：

【解决方案4】：

在“show-pwd”btn click 上添加一个函数。执行以下任务：

获取密码字段的当前值。
将密码字段的类型从“密码”设置为“文本”
将密码字段的值设置为您获取的值。（这可能需要也可能不需要）

【讨论】：

【解决方案5】：

您可以使用 Material UI 的 Input 元素，该元素提供了在文本字段末尾添加图标的功能，您可以通过单击图标来隐藏和显示密码

外观如下：

隐藏密码模式

显示密码模式

<FormControl className={clsx(classes.margin, classes.textField)}>
      <InputLabel htmlFor="standard-adornment-password">Password</InputLabel>
      <Input
        id="standard-adornment-password"
        type={values.showPassword ? 'text' : 'password'}
        value={values.password}
        onChange={handleChange('password')}
        endAdornment={
          <InputAdornment position="end">
            <IconButton
              aria-label="toggle password visibility"
              onClick={handleClickShowPassword}
              onMouseDown={handleMouseDownPassword}
            >
              {values.showPassword ? <Visibility /> : <VisibilityOff />}
            </IconButton>
          </InputAdornment>
        }
      />
    </FormControl>

参考链接：https://material-ui.com/components/text-fields/#InputAdornments.js

【讨论】：