zoukankan      html  css  js  c++  java
  • 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={{ '100%', height:'100%', padding:'100px'}}>
                <div className="code-box">
                  <Input
                    type={defaultType ? (newType ? 'password' : 'text') : 'text'}
                    size="large"
                    maxLength="6"
                    style={{'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;
  • 相关阅读:
    BI的相关技术和产品细分(转自娄工)
    SOA系列二:采用SOA的常见失误
    ASP.NET第三方控件网站
    BI名词字典
    VSS2005 添加文件夹方法!
    c#范型编程系列一(非原创)
    数据挖掘项目的生命周期
    SQLServer 2005开发与商业智能培训大纲
    CVSNT配置配置与在ECLIPSE中使用
    JS通用UI框架
  • 原文地址:https://www.cnblogs.com/hcxwd/p/7511401.html
Copyright © 2011-2022 走看看