登录密码框 内容的显示隐藏

 逻辑：input自带的password属性，只需要点击眼睛，控制type属性即可；注意点：当type=password时，给input的value一个挂靠在state中的类型，不需要具体值

/**
 * @name Pass_word
 * @description 登录类验证
 */
import React, { Component } from "react";
import { Icon, message } from "antd";
import Title from "@/component/Title";
import styles from "./styles.module.less";

class Pass_word extends Component {
  state = {
    eyes: "eye-invisible",
    pass: ""
  };

  /**
   * @name onChange
   * @param {String} val输入框内容
   * @description 输入框内容改变
   */
  onChange = (val) => {
    //正则验证 只能输入数字或字母或
    let reg = /^[0-9a-zA-Z*]+$/;
    if (!val) {
      this.setState({ pass: "" });
      return;
    } else if (reg.test(val)) {
      this.setState({ pass: val });
    } else {
      message.destroy(); //销毁之前的提示
      message.error("只能输入数字或字母");
    }
  };

  /**
   * @name eyesChange
   * @description 图标变化 ，引起输入框内容变化
   */
  eyesChange = () => {
    const { eyes } = this.state;
    if (eyes === "eye-invisible") {
      //由*号，变为正常密码
      this.setState({ eyes: "eye" });
    } else {
      //由正常密码，变为*号
      this.setState({ eyes: "eye-invisible" });
    }
  };

  render() {
    const { eyes, pass, passStart } = this.state;
    return (
      <div>
        <h3>Pass_word</h3>
        <div className={styles.block}>
          <Title text={"登录密码"} />
          <input type={eyes === "eye" ? "text" : "password"} value={eyes === "eye" ? pass : passStart} onChange={(e) => this.onChange(e.target.value)} />
          <Icon type={eyes} onClick={this.eyesChange} />
        </div>
      </div>
    );
  }
}
export default Pass_word;