使用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 相关文章推荐
javascript 清空form表单中某种元素的值
Dec 26 Javascript
javascript中parentNode,childNodes,children的应用详解
Dec 17 Javascript
初步了解javascript面向对象
Nov 09 Javascript
基于node实现websocket协议
Apr 25 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
jQuery实现弹出窗口弹出div层的实例代码
Jan 09 Javascript
bootstrap输入框组使用方法
Feb 07 Javascript
js实现显示手机号码效果
Mar 09 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
Sep 11 Javascript
JavaScript代码执行的先后顺序问题
Oct 29 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
Mar 29 Javascript
vant时间控件使用方法详解
Dec 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
PHP mb_convert_encoding文字编码的转换函数介绍
2011/11/10 PHP
php显示时间常用方法小结
2015/06/05 PHP
微信公众号开发之文本消息自动回复php代码
2016/08/08 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
Dojo 学习要点
2010/09/03 Javascript
js点击更换背景颜色或图片的实例代码
2013/06/25 Javascript
jquery each的几种常用的使用方法示例
2014/01/21 Javascript
jquery实现瀑布流效果分享
2014/03/26 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
使用vue重构资讯页面的实例代码解析
2019/11/26 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
NodeJS配置CORS实现过程详解
2020/12/02 NodeJs
[48:37]EG vs OG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python对html过滤处理的方法
2018/10/21 Python
浅谈Python中的继承
2020/06/19 Python
浅谈Python __init__.py的作用
2020/10/28 Python
python将YUV420P文件转PNG图片格式的两种方法
2021/01/22 Python
一款利用html5和css3实现的3D滚动特效的教程
2015/01/04 HTML / CSS
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
Agoda台湾官网:国内外订房2折起
2018/03/20 全球购物
加拿大领先家居家具网上购物:Aosom.ca
2020/05/27 全球购物
几个SQL的面试题
2014/03/08 面试题
服装厂厂长职责
2013/12/16 职场文书
卫校中专生的自我评价
2014/01/15 职场文书
高中运动会入场词
2014/02/14 职场文书
老师的检讨书
2014/02/23 职场文书
2015新年寄语(一句话)
2014/12/08 职场文书
导游词范文
2015/02/13 职场文书
董事长新年致辞
2015/07/29 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
html中显示特殊符号(附带特殊字符对应表)
2021/06/21 HTML / CSS
十大动画制作软件,Adobe产品上榜两款,第一是行业标准软件
2022/03/18 杂记
HTML5页面打开微信小程序功能实现
2022/09/23 HTML / CSS