import React from 'react';
import './index.css';
export default class InputGroup extends React.Component {
constructor(props) {
super(props);
this.state = {
boxLength: [],
numList: [],
isFocus: false,
num: ''
};
this.textChange = this.textChange.bind(this);
this.inputFocus = this.inputFocus.bind(this);
}
textChange(e) {
const value = e.target.value.replace(/[^\d]/g, '')
this.props.getValue(value)
this.setState({
num: value
})
setTimeout(() => {
this.setState({
numList: this.state.num.split('')
})
}, 100);
}
inputFocus() {
this.refs.focus()
this.setState({ isFocus: true })
}
componentDidMount() {
const { length } = this.props;
switch (length) {
case 4:
this.setState({
boxLength: [0, 1, 2, 3]
})
break;
case 6:
this.setState({
boxLength: [0, 1, 2, 3, 4, 5]
})
break;
default:
this.setState({
boxLength: [0, 1, 2, 3, 4, 5]
})
}
}
render() {
const { length, type } = this.props;
const { num, numList, isFocus, boxLength } = this.state;
return (
type === 'line' ?
className="box-input"
maxLength={length}
value={num}
onChange={this.textChange}
onBlur={() => this.setState({ isFocus: false })}
/>
return (
)
})}
: ''
}
{
type === 'box' ?
className="box-input"
maxLength={length}
value={num}
onChange={this.textChange}
onBlur={() => this.setState({ isFocus: false })}
/>
return (
)
})}
: ''
}
);
}
}