本文介绍了使用react实现手机号的数据同步显示功能的示例代码，分享给大家，具体如下：
要求如下
- 输入框输入内容数据长度大于0，展示出预览信息@H_502_6@
- 光标离开关闭预览信息@H_502_6@
- 预览信息每隔4位插入一个特殊字符_,输入内容不变@H_502_6@
- 限制长度为13位@H_502_6@
- 只允许输入数字（0-9）@H_502_6@
// NOTE: 获取焦点事件 原生onFocus 即可
// NOTE: 离开焦点事件 原生onBlur即可
// NOTE: 输入框数据过滤 直接在change方法里进行过滤
// NOTE: 条件处理 通过不同条件返回不同节点做条件处理
class Zinput extends Component {
constructor(props) {
super(props);
this.state = {
value: '',showBig: false,};
this.handleChange = this.handleChange.bind(this);
this.inputOnFocus = this.inputOnFocus.bind(this);
this.inputOnBlur = this.inputOnBlur.bind(this);
}
inputOnFocus() {
if (this.state.value.length > 0) {
this.setState({
showBig: true
})
}
}
inputOnBlur() {
this.setState({
showBig: false
})
if(this.props.chanegNumber){
this.props.chanegNumber(this.state.value)
}
}
handleChange(event) {
let val = event.target.value.substr(0,13)
.replace(/[^\d]/g,'')
event.target.value = val
this.setState({
value: val,showBig: true,});
}
/**
// NOTE: 离开焦点事件 原生onBlur即可
// NOTE: 输入框数据过滤 直接在change方法里进行过滤
// NOTE: 条件处理 通过不同条件返回不同节点做条件处理
class Zinput extends Component {
constructor(props) {
super(props);
this.state = {
value: '',showBig: false,};
this.handleChange = this.handleChange.bind(this);
this.inputOnFocus = this.inputOnFocus.bind(this);
this.inputOnBlur = this.inputOnBlur.bind(this);
}
inputOnFocus() {
if (this.state.value.length > 0) {
this.setState({
showBig: true
})
}
}
inputOnBlur() {
this.setState({
showBig: false
})
if(this.props.chanegNumber){
this.props.chanegNumber(this.state.value)
}
}
handleChange(event) {
let val = event.target.value.substr(0,13)
.replace(/[^\d]/g,'')
event.target.value = val
this.setState({
value: val,showBig: true,});
}
/**
- 根据字符串没隔len位插入一个下滑杠，返回处理后的字符串
- @method getStr
- @author 朱阳星
- @datetime 2018-04-02T09:57:58+080
- @email zhuyangxing@foxmail.com
- @param {String} str 待处理字符串
- @param {Number} len 每隔位数插入下滑杠
- @return {String} 处理后的字符串
*/
getStr(str,len) {
let lenth = str.length
let len1 = len - 1
let newStr = ''
for (var i = 0; i < lenth; i++) {
if (i % len === len1 && i > 0) {
newStr += str.charAt(i) + '_'
} else {
newStr += str.charAt(i)
}
}
if (newStr.length % (len + 1) === 0) {
// 解决最后一位为补充项问题
newStr = newStr.substr(0,newStr.length - 1)
}
return newStr
}
render() {
// NOTE return 需要用圆括号包住并处理
// NOTE 条件语句里没有节点也要用空字符串进行处理 否则sonalint会报错，页面也会报错
const showBig = this.state.showBig ? (
<div className="big-show">{ this.getStr(this.state.value,4) }
) : ''
return (
<div className="zInput">
<input className="input"
type = "text"
onFocus={ this.inputOnFocus }
onBlur={ this.inputOnBlur }
value={ this.state.value }
onChange={ this.handleChange }> {showBig}
