使用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 相关文章推荐
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
Nov 05 Javascript
原生Js实现简易烟花爆炸效果的方法
Mar 20 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 Javascript
AngularJS ng-bind-template 指令详解
Jul 30 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 Javascript
Bootstrap一款超好用的前端框架
Sep 25 Javascript
Vue仿支付宝支付功能
May 25 Javascript
JS实现动态生成html table表格的方法分析
Jul 11 Javascript
使用layui定义一个模块并使用的例子
Sep 14 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 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
php仿discuz分页效果代码
2008/10/02 PHP
基于php使用memcache存储session的详解
2013/06/25 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
PHP开发APP端微信支付功能
2017/02/17 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
JavaScript 继承详解(三)
2009/07/13 Javascript
js常用排序实现代码
2010/12/28 Javascript
jQuery $.data()方法使用注意细节
2012/12/31 Javascript
javascript浏览器兼容教程之事件处理
2014/06/09 Javascript
创建、调用JavaScript对象的方法集锦
2014/12/24 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
在javascript中使用com组件的简单实现方法
2016/08/17 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
JS与HTML结合实现流程进度展示条思路详解
2017/09/03 Javascript
vue解决跨域路由冲突问题思路解析
2017/11/03 Javascript
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
JavaScript变量Dom对象的所有属性
2020/04/30 Javascript
[15:35]教你分分钟做大人:天怒法师
2014/10/30 DOTA
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
在Python中使用正则表达式的方法
2015/08/13 Python
python 性能优化方法小结
2017/03/31 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
Python实现八皇后问题示例代码
2018/12/09 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
python和go语言的区别是什么
2020/07/20 Python
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
C#笔试题
2015/07/14 面试题
毕业生自荐书
2014/02/02 职场文书
求职信格式要求
2014/05/23 职场文书
2014年大学团支部工作总结
2014/12/02 职场文书
2014年保险业务员工作总结
2014/12/23 职场文书
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang