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

Posted 2023-02-22

【中文标题】如何从 Material UI 文本字段中查看密码？

【英文标题】：How to View Password from Material UI Textfield?

【发布时间】：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>
        );
      

【参考方案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