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


Posted in Javascript onApril 03, 2018

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

要求如下

  1. 输入框输入内容数据长度大于0,展示出预览信息
  2. 光标离开关闭预览信息
  3. 预览信息每隔4位插入一个特殊字符_,输入内容不变
  4. 限制长度为13位
  5. 只允许输入数字(0-9)
// Zinput.js
import 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;
}

功能虽然实现,但是肯定是作为某个节点的某个子组件使用的,父组件调用方法有两种

1.使用refs直接获取子组件state的值

constructor(props) {
 super(props);
 this.handerClick2 = this.handerClick2.bind(this);
}
handerClick2(){
 // NOTE 父组件通过refs获取子组件的state 
 console.log("使用ref获取子组件的值",this.refs.zinput.state.value)
}
render() {
 return (
  <div className="App">
   <Zinput ref="zinput"></Zinput>
   <input type="button" value="获取电话号码的值22" onClick={ this.handerClick2 }/>
  </div> 
 );
}

2.每次子组件焦点离开时调用父组件传过来的方法,修改父组件state值

constructor(props) {
 super(props);
 this.state = {
  phoneNumber: '',
 };
 this.handerClick = this.handerClick.bind(this);
 this.changePhoneNumber = this.changePhoneNumber.bind(this);
}
changePhoneNumber(number){
 this.setState({
   phoneNumber: number,
 })
}
handerClick(){
 // NOTE 根据react的思想是在子组件处理完某件事的时候调用父组件的方法修改父组件的state值
 console.log("使用state获取值",this.state.phoneNumber)
}
render() {
 return (
  <div className="App">
   <Zinput ref="zinput" chanegNumber={this.changePhoneNumber}></Zinput>
   <input type="button" value="获取电话号码的值" onClick={ this.handerClick }/>
  </div>
 );
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
异步安全加载javascript文件的方法
Jul 21 Javascript
JQuery 设置checkbox值二次无效的解决方法
Jul 22 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
Sep 29 Javascript
jQuery实现 上升、下降、删除、添加一行代码
Mar 06 Javascript
JavaScript体验异步更好的解决办法
Jan 08 Javascript
微信小程序下拉框组件使用方法详解
Dec 28 Javascript
vue与bootstrap实现简单用户信息添加删除功能
Feb 15 Javascript
通过扫小程序码实现网站登陆功能
Aug 22 Javascript
JavaScript 防篡改对象的用法示例
Apr 24 Javascript
JS遍历DOM文档树的方法实例详解
Apr 03 #Javascript
JavaScript同源策略和跨域访问实例详解
Apr 03 #Javascript
vue 组件中slot插口的具体用法
Apr 03 #Javascript
react 实现页面代码分割、按需加载的方法
Apr 03 #Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 #Javascript
使用FileReader API创建Vue文件阅读器组件
Apr 03 #Javascript
vue内置指令详解
Apr 03 #Javascript
You might like
怎样在UNIX系统下安装MySQL
2006/10/09 PHP
php htmlspecialchars加强版
2010/02/16 PHP
php学习之function的用法
2012/07/14 PHP
深入php数据采集的详解
2013/06/02 PHP
ThinkPHP中关联查询实例
2014/12/02 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
php metaphone()函数的定义和用法
2016/05/15 PHP
PHP输出图像imagegif、imagejpeg与imagepng函数用法分析
2016/11/14 PHP
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
javascript中检测变量的类型的代码
2010/12/28 Javascript
ejs v9 javascript模板系统
2012/03/21 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
prototype框架中美元符号$用法分析
2016/01/22 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
Vue.js项目模板搭建图文教程
2017/09/20 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
详解Angular调试技巧之报错404(not found)
2018/01/31 Javascript
AngularJS上传文件的示例代码
2018/11/10 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
生产制造追溯系统之再说条码打印
2019/06/03 Javascript
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
在Python中使用HTMLParser解析HTML的教程
2015/04/29 Python
Python类定义和类继承详解
2015/05/08 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
python实现抖音点赞功能
2019/04/07 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
python数据预处理方式 :数据降维
2020/02/24 Python
环保公益策划方案
2014/08/15 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书