React表单明文密文切换，携带禁止浏览器自动回填，简单验证提示功能

import React from 'react';
import PropTypes from 'prop-types';
import { Button, Input, message } from 'antd';   // 引入ant-design

class Demo extends React.PureComponent{
    constructor(props) {
      super(props);
      this.state = {
        value: '',
        newType: true,
        defaultType: false,
      };
    }

    // 让表单初始type=text，默认关闭切换状态；点击input框后，开启type切换状态。避免浏览器自动回填。
    setType = () => { this.setState({ defaultType: true }); }
    // 切换表单明文密文显示
    changeType = (newType) => {
      this.setState({ newType: !newType });
    }
    // 监听表单输入
    changeCode = (event) => {
      if (isNaN(event.target.value)) {
        message.destroy();              // 销毁上次弹窗
        message.warning('请输入数字');   // 提示弹窗
        this.setState({ value: '' });
      } else {
        this.setState({ value: event.target.value });
        // 更新value之后，在其他方法里从state中取value值
      }
    }

    render() {
      const { newType, defaultType } = this.state;
      return (
        <div style={{ width:'100%', height:'100%', padding:'100px'}}>
            <div className="code-box">
              <Input
                type={defaultType ? (newType ? 'password' : 'text') : 'text'}
                size="large"
                maxLength="6"
                style={{width:'100px', marginRight: '20px'}}
                placeholder="输入6位数字"
                onChange={(event) => { this.changeCode(event); }}
                onClick={this.setType}
              />
              <Button size="large" onClick={() => { this.changeType(newType); }}>切换显示</Button>
            </div>
        </div>
      )
    }
}
export default Demo;

 

转载于:https://www.cnblogs.com/hcxwd/p/7511401.html