如何使用单个useRef循环进入多个元素？

Question

我有两个输入字段，使用一个useRef，我想让current.getAttribute从密码类型更改为文本类型。但是根据docs，只会选择最后一个元素。我想使用.map循环到元素中。我不能使用.map来创建元素，因为由于我的身份验证，每个元素都必须是唯一的。

代码

const passwordRef = useRef();
const handleShowPassword = (e) => {
    console.log(passwordRef.map((e) => console.log(e))); <--- this coz error of passwordRef.map is not a function
    setShowEye(!showEye);
    const type =
      passwordRef.current.getAttribute('type') === 'password'
        ? 'text'
        : 'password';
    passwordRef.current.setAttribute('type', type);
  };

<div className='form-group w-full relative'>
            <PasswordStrength
              type='password'
              placeholder='Current password'
              name='currentPassword'
              ref={passwordRef}
              border={error && error.currentPasswordError ? 'failed' : 'transparent'}
              value={userInfo.currentPassword}
              onChange={handleOnChange}
            />
            {!showEye && (
              <FontAwesomeIcon
                icon={faEye}
                className='fill-current text-customRed absolute top-4 right-4'
                onClick={handleShowPassword}
              />
            )}
            <label for='password'>
              {showEye && (
                <FontAwesomeIcon
                  icon={faEyeSlash}
                  className='fill-current text-customRed absolute top-4 right-4'
                  onClick={handleShowPassword}
                />
              )}
              {error && error.passwordError ? (
                <Notifications type='text-failed' field='password'>
                  <span className='text-xxs absolute -left-0 -bottom--7px fadeIn'>
                    {error.msg}
                  </span>
                </Notifications>
              ) : (
                ''
              )}
            </label>
          </div>
          <div className='form-group w-full relative'>
            <PasswordStrength
              type='password'
              placeholder='New password'
              name='password'
              ref={passwordRef}
              border={error && error.passwordError ? 'failed' : 'transparent'}
              value={userInfo.password}
              onChange={handleOnChange}
            />
            <label for='password'>
              {error && error.passwordError ? (
                <Notifications type='text-failed' field='password'>
                  <span className='text-xxs absolute -left-0 -bottom--7px fadeIn'>
                    {error.msg}
                  </span>
                </Notifications>
              ) : (
                ''
              )}
            </label>
          </div>

Answer 1

简短的回答:你不能。即使这是可能的，你的输入有硬编码的type="password"，所以密码的可见性将被重置在每一个改进机上。但实际上你甚至不需要裁判。

您的密码字段几乎相同(至少在视觉上如此)。因此，您可以将密码字段提取到单独的组件中，并重用它两次。这种重新组合的好处是您可以创建内部状态，指示输入的密码是显示为文本还是隐藏。

const PasswordField = ({ label, ...props }) => {
  const [visible, setVisible] = React.useState(false)
  
  return (
    <label>
      {label}:{' '}
      <input
        type={visible ? 'text' : 'password'}
        {...props}
      />
      <button onClick={() => setVisible(!visible)}>
        {visible ? 'Hide' : 'Show'}
      </button>
    </label>
  )
}

const App = () => {
  return (
    <div>
      <div>
        <PasswordField label="Old Password" defaultValue="12345" />
      </div>
      <div>
        <PasswordField label="New Password" defaultValue="12345" />
      </div>
    </div>
  )
}

我的代码片段被有意地简化，以演示上面提到的重新组合。

​

const PasswordField = ({ label, ...props }) => {
  const [visible, setVisible] = React.useState(false)
  
  return (
    <label>
      {label}:{' '}
      <input
        type={visible ? 'text' : 'password'}
        {...props}
      />
      <button onClick={() => setVisible(!visible)}>
        {visible ? 'Hide' : 'Show'}
      </button>
    </label>
  )
}

const App = () => {
  return (
    <div>
      <div>
        <PasswordField label="Old Password" defaultValue="12345" />
      </div>
      <div>
        <PasswordField label="New Password" defaultValue="12345" />
      </div>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

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

<div id="root"></div>

​