使用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 相关文章推荐
网页的标准,IMG不支持onload标签怎么办
Jun 29 Javascript
根据出生日期自动取得星座的js代码
Jul 20 Javascript
jquery获取table中的某行全部td的内容方法
Mar 08 Javascript
jquery 提交值不为空的元素示例代码
May 10 Javascript
浅析JQuery中的html(),text(),val()区别
Sep 01 Javascript
jQuery animate easing使用方法图文详解
Jun 17 Javascript
AngularJS国际化详解及示例代码
Aug 18 Javascript
微信小程序 数据封装,参数传值等经验分享
Jan 09 Javascript
深入理解Angularjs 脏值检测
Oct 12 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
Dec 24 Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
Aug 09 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
discuz Passport 通行证 整合笔记
2008/06/30 PHP
PHP 字符串分割和比较
2009/10/06 PHP
php中session_unset与session_destroy的区别分析
2011/06/16 PHP
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
php提取微信账单的有效信息
2018/10/01 PHP
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
jquery做的一个简单的屏幕锁定提示框
2014/03/26 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
Javascript实现购物车功能的详细代码
2018/05/08 Javascript
微信小程序实现富文本图片宽度自适应的方法
2019/01/20 Javascript
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
Python 字典dict使用介绍
2014/11/30 Python
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
Python数据库小程序源代码
2019/09/15 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
Python用K-means聚类算法进行客户分群的实现
2020/08/23 Python
俄罗斯有趣和原创礼物网上商店:MagicMag
2019/08/01 全球购物
大学生职业生涯规划范文
2013/12/31 职场文书
银行服务感言
2014/03/01 职场文书
前台文员职责范本
2014/03/07 职场文书
不尊敬老师的检讨书
2014/12/21 职场文书
社区重阳节活动总结
2015/03/24 职场文书
财务稽核岗位职责
2015/04/13 职场文书
消防隐患整改通知书
2015/04/22 职场文书
党员身份证明材料
2015/06/19 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书