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;