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 100%', height:'100%', padding:'100px'}}>
<div className="code-box">
<Input
type={defaultType ? (newType ? 'password' : 'text') : 'text'}
size="large"
maxLength="6"
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;