import React from 'react';
import { Button, Modal, Input, Icon } from 'antd';
class UserDia extends React.Component {
constructor(props) {
super(props);
this.state = {
modalContain: '',
visible: false,
confirmLoading: false,
userName: props.uname || '',
userAddr: props.uaddress || '',
userTels: [],
telsInput: [],
removeable: false,
};
}
componentWillReceiveProps(nextProps) {
this.setState({
visible: nextProps.visible
})
}
addTels = () => {
let telsInput = this.state.telsInput,
number = telsInput.length + 2;
const tel =
placeholder={"电话" + number}
size="large"
key={number}
ref={(node) => this['userTels' + number] = node}
prefix={
}
OnChange={(e) => { this.onChange(e, 'tel', number - 1) }}
value={this.state.userTels[number - 1]}
10px' }}
/>;
telsInput.push(tel);
this.setState({
telsInput: telsInput,
removeable: true,
})
}
removeTel = () => {
let telsInput = this.state.telsInput,
removeable = telsInput.length === 1 ? false : true;
telsInput.pop();
this.setState({
telsInput: telsInput,
removeable: removeable
});
}
showModal = () => {
this.setState({
visible: true,
});
}
handleOk = () => {
this.setState({
confirmLoading: true,
});
setTimeout(() => {
this.setState({
visible: false,
confirmLoading: false,
});
}, 2000);
}
handleCancel = () => {
this.setState({
visible: false,
});
}
OnChange= (e, type, index) => {
switch (type) {
case 'name':
this.setState({ userName: e.target.value });
break;
case 'addr':
this.setState({ userAddr: e.target.value });
break;
case 'tel':
const userTels = this.state.userTels;
userTels[index] = e.target.value;
this.setState({ userTels: userTels})
}
}
emitEmpty = (type) => {
switch (type) {
case 'name':
this.userNameInput.focus();
this.setState({ userName: '' });
break;
case 'addr':
this.userAddr.focus();
this.setState({ userAddr: '' })
break;
case 'tel':
break;
}
}
render() {
console.log(this.state.userTels);
let arr = [
,
]
const { visible, confirmLoading, modalContain, removeable, userName, userAddr, userTels, telsInput } = this.state,
nameSuffix = userName ?
{this.emitEmpty('name')}} /> : null,
addrSuffix= userAddr? {this.emitEmpty('addr')}} /> : null;
return (
maskClosable={false}
visible={visible}
OnOk={this.handleOk}
cOnfirmLoading={confirmLoading}
OnCancel={this.handleCancel}
>
placeholder="用户名"
size="large"
value={userName}
suffix={nameSuffix}
prefix={
}
ref={(node) => {this.userNameInput = node}}
OnChange={(e) => { this.onChange(e, 'name') }}
10px' }}
/>
placeholder="地址"
size="large"
value={userAddr}
suffix={addrSuffix}
prefix={
}
ref={(node) => {this.userAddr = node}}
OnChange={(e) => { this.onChange(e, 'addr') }}
10px' }}
/>
placeholder="电话1"
size="large"
value={userTels[0]}
prefix={
}
OnChange={(e) => { this.onChange(e, 'tel', 0) }}
/>
{telsInput}
)
}
}
export default UserDia;
京公网安备 11010802041100号