如何在 React 中切换多个字段的显示和隐藏密码

Question

我想切换输入字段的显示和隐藏密码。

它可以在单个输入上工作，但我不知道如何为多个输入字段做到这一点

我希望在点击输入图标时它会切换显示/隐藏密码

它应该为每个输入字段单独工作。

例如，如果我单击当前密码输入字段图标，那么它将仅显示/隐藏此输入字段的密码。

const App = () => {
  const [values, setValues] = React.useState({
    password: "",
    showPassword: false,
  });
  
  const handleClickShowPassword = () => {
    setValues({ ...values, showPassword: !values.showPassword });
  };
  
  const handlePasswordChange = (prop) => (event) => {
    setValues({ ...values, [prop]: event.target.value });
  };
  
  return (
    <div
      style={{
        marginLeft: "30%",
      }}
    >
      <h4>Change your password</h4>
      <InputLabel htmlFor="standard-adornment-password">
        Current password
      </InputLabel>
      <Input
        type={values.showPassword ? "text" : "password"}
        onChange={handlePasswordChange("password")}
        value={values.password}
        endAdornment={
          <InputAdornment position="end">
            <IconButton
              onClick={handleClickShowPassword}
            >
              {values.showPassword ? <Visibility /> : <VisibilityOff />}
            </IconButton>
          </InputAdornment>
        }
        <InputLabel htmlFor="standard-adornment-password">
            New password
        </InputLabel>
        <Input
            type={values.showPassword ? "text" : "password"}
            onChange={handlePasswordChange("password")}
            value={values.password}
            endAdornment={
              <InputAdornment position="end">
                <IconButton
                  onClick={handleClickShowPassword}
                >
                  {values.showPassword ? <Visibility /> : <VisibilityOff />}
                </IconButton>
          </InputAdornment>
        }
        <InputLabel htmlFor="standard-adornment-password">
            Confirm password
        </InputLabel>
        <Input
            type={values.showPassword ? "text" : "password"}
            onChange={handlePasswordChange("password")}
            value={values.password}
            endAdornment={
              <InputAdornment position="end">
                <IconButton
                  onClick={handleClickShowPassword}
                >
                  {values.showPassword ? <Visibility /> : <VisibilityOff />}
                </IconButton>
              </InputAdornment>
        }
      />
    </div>
  );
};

Answer 1

因为您使用一个 boolean 来检查 3 个字段 password。要修复，您只需更新 showPassword 以存储 string，如下所示：

  const handleClickShowPassword = (fieldName) => {
    setValues({ ...values, showPassword: fieldName === values.showPassword ? "" : fieldName});
  };

...
type={values.showPassword === "currentPassword" ? "text" : "password"}
onClick={() => handleClickShowPassword("currentPassword")}
{values.showPassword === "currentPassword" ? <Visibility /> : <VisibilityOff />}
...

...
type={values.showPassword === "newPassword" ? "text" : "password"}
onClick={() => handleClickShowPassword("newPassword")}
{values.showPassword === "newPassword" ? <Visibility /> : <VisibilityOff />}
...

...
type={values.showPassword === "confirmPassword" ? "text" : "password"}
onClick={() => handleClickShowPassword("confirmPassword")}
{values.showPassword === "confirmPassword" ? <Visibility /> : <VisibilityOff />}
...

Answer 2

我能够想出这个。让我知道是否有帮助

const App = () => {
  const [values, setValues] = React.useState({
    currentPassword:{show:false,password:'' "},
    newPassword:{show:false,password:'' "},
    confirmPassword{show:false,password:'' "}
  });

const handleClickShowPassword = (prop) =>{
    Input = values[props]
    setValues({ ...values, [prop]: {show:!Input.show, password:Input.password} });
  };
  
  const handlePasswordChange = (prop,value) =>  {
    Input = values[props]
    setValues({ ...values, [prop]: {show:Input.show, 
    password:value} });
  };
  
  return (
    <div
      style={{
        marginLeft: "30%",
      }}
    >
      <h4>Change your password</h4>
      <InputLabel htmlFor="standard-adornment-password">
        Current password
      </InputLabel>
      <Input
        type={values.currentPassword.show ? "text" : "password"}
        onChange={({target})=>handlePasswordChange("currentPassword",target.value)}
        value={values.currentPassword.password}
        endAdornment={
          <InputAdornment position="end">
            <IconButton
              onClick={handleClickShowPassword}
            >
              {values.currentPassword.show ? <Visibility /> : <VisibilityOff />}
            </IconButton>
          </InputAdornment>
        }
        <InputLabel htmlFor="standard-adornment-password">
            New password
        </InputLabel>
        <Input
            type={values.newPassword.show ? "text" : "password"}
            onChange={({target})=>handlePasswordChange("newPassword",target.value)}
            value={values.newPassword.password}
            endAdornment={
              <InputAdornment position="end">
                <IconButton
                  onClick={handleClickShowPassword}
                >
                  {values.newPassword.show ? <Visibility /> : <VisibilityOff />}
                </IconButton>
          </InputAdornment>
        }
        <InputLabel htmlFor="standard-adornment-password">
            Confirm password
        </InputLabel>
        <Input
            type={values.confirmPassword.show ? "text" : "password"}
            onChange={({target})=>handlePasswordChange("confirmPassword",target.value)}
            value={values.confirmPassword.password}
            endAdornment={
              <InputAdornment position="end">
                <IconButton
                  onClick={handleClickShowPassword}
                >
                  {values.confirmPassword.show ? <Visibility /> : <VisibilityOff />}
                </IconButton>
              </InputAdornment>
        }
      />
    </div>
  );
};

Answer 3

你能做这样的事吗？

const Input = (props) => {
  const [showPassword, setShowPassword] = React.useState(false)
  
  return (
    <div>
      <input type={showPassword ? "text" : "password"} {...props} />
      <button onMouseDown={(e) => {
        e.preventDefault()
        setShowPassword(!showPassword)
      }}>{showPassword ? 'Hide' : 'Show'} password</button>
    </div>
  )
}

const reducer = (state, changes) => {
  return {
    ...state,
    ...changes
  }
}

const App = () => {
  const [values, setValues] = React.useReducer(reducer, {
    currentPassword: "",
    newPassword: "",
    confirmPassword: ""
  });
  
  
  return (
    <div style={{ marginLeft: "30%" }}>
      <h4>Change your password</h4>
      <label htmlFor="current-password">Current password</label>
      <Input id="password-input" onChange={({target}) => {
        return setValues({currentPassword: target.value})
      }} />
      
      <label htmlFor="new-password">New password</label>
      <Input id="new-password" onChange={({target}) => {
        return setValues({newPassword: target.value})
      }} />
      
      <label htmlFor="confirm-password">Confirm password</label>
      <Input id="confirm-password" onChange={({target}) => {
        return setValues({confirmPassword: target.value})
      }} />
      
      <h4>Form content</h4>
      <ul>
        <li>currentPassword : {values.currentPassword}</li>
        <li>newPassword : {values.newPassword}</li>
        <li>confirmPassword : {values.confirmPassword}</li>
      </ul>
    </div>
  );
};

ReactDOM.render(<App />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>