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;
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步