我正在尝试在React中的Register表单中实现eye/eyeslash。

这是一个负责更改可见性类型和眼睛图标的功能。

import React, { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

export const usePasswordToggle = () => {
  const [visible, setVisibility] = useState();

  const Icon = <FontAwesomeIcon icon={visible ? "eye-slash" : "eye"} />;

  const InputType = visible ? "text" : "password";

  return [InputType, Icon];
};

字符串

我尝试在负责注册的组件中实现。

import React, { Component, createRef } from "react";
import { usePasswordToggle } from "./usePasswordToggle";

class Register1 extends React.Component {
  EmailR = createRef();
  UsernameR = createRef();
  PasswordR = createRef();
  PasswordConfirmR = createRef();

  constructor(props) {
    super();
    this.state = {
      message: "",
      password: "",
      confirmPassword: "",
    };
  }

  handleSubmit = (event) => {
    // alert(this.PasswordR.current.value);
    // alert(this.PasswordConfirmR.current.value);
    if (this.PasswordR.current.value !== this.PasswordConfirmR.current.value) {
      alert("The passwords doesn't match");
      return false; // The form won't submit
    } else {
      alert("The passwords do match");
      return true; // The form will submit
    }
  };

  onCreateAccount = () => {
    let loginInfo = {
      Username: this.UsernameR.current.value,
      Email: this.EmailR.current.value,
      Password: this.PasswordR.current.value,
    };

    fetch("http://localhost:5000/api/authenticate/register", {
      method: "POST",
      headers: { "Content-type": "application/json" },
      body: JSON.stringify(loginInfo),
    })
      .then((r) => r.json())
      .then((res) => {
        if (res) {
          this.setState({
            message:
              "New Account is Created Successfully. Check your email to verify Account.",
          });
        }
      });
  };

  render() {
    return (
      <div>
        <h2 className="FormDescription">
          {" "}
          Please enter Account details for registration
        </h2>
        <div className="Form">
          <p>
            <label>
              Email: <input type="text" ref={this.EmailR} />
            </label>
          </p>

          <p>
            <label>
              Username: <input type="text" ref={this.UsernameR} />
            </label>
          </p>

          <div>
            <label>
              Password:{" "}
              <input type={usePasswordToggle.InputType} ref={this.PasswordR} />
            </label>
            <span className="password-toogle-icon">
              {usePasswordToggle.Icon}
            </span>
          </div>

          <p>
            <label>
              ReenterPassword:{" "}
              <input type="password" ref={this.PasswordConfirmR} />{" "}
            </label>
          </p>

          <button onClick={this.handleSubmit}> Create </button>

          <p>{this.state.message}</p>
        </div>
      </div>
    );
  }
}

export default Register1;

型
我的密码总是可见的，眼睛图标甚至在表单上看不到（它应该在我的输入字段中，但它不是）。
关注以下代码片段：

<div>
  <label>
    Password: <input type={usePasswordToggle.InputType} ref={this.PasswordR} />
  </label>
  <span className="password-toogle-icon">{usePasswordToggle.Icon}</span>
</div>

型
有什么建议是什么问题？