使用react实现手机号的数据同步显示功能的示例代码

本文介绍了使用react实现手机号的数据同步显示功能的示例代码，分享给大家，具体如下：

要求如下

输入框输入内容数据长度大于0，展示出预览信息 光标离开关闭预览信息 预览信息每隔4位插入一个特殊字符_,输入内容不变 限制长度为13位 只允许输入数字（0-9）

// Zinput.jsimport React, { Component} from 'react';import './Zinput.css'// 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,  }); } /**  * 根据字符串没隔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) }</div>  ) : ''  return (   <div className="zInput">    <input className="input"         type = "text"         onFocus={ this.inputOnFocus }        onBlur={ this.inputOnBlur }        value={ this.state.value }         onChange={ this.handleChange }>        </input>    {showBig}   </div>  ) }}export default Zinput; // Don't forget to use export default!

<!-- Zinput.css -->.zInput{  position: absolute;  top:80px;  left:40px;  }.input { position: absolute; top: 0; left: 0;}.big-show {  position: relative;  top: -40px;  font-size: 36px;  line-height: 40px;  background-color: red;}