逻辑：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;