使用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不是基础的基础
Dec 24 Javascript
javascript setTimeout和setInterval 的区别
Dec 08 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
Jan 27 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
Mar 04 Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
第二篇Bootstrap起步
Jun 21 Javascript
基于js的变量提升和函数提升(详解)
Sep 17 Javascript
详解js实时获取并显示当前时间的方法
May 10 Javascript
js实现图片推拉门效果代码实例
May 18 Javascript
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
vue element-ui实现input输入框金额数字添加千分位
Dec 29 Javascript
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
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生成数组再传给js的方法
2014/08/07 PHP
在Windows系统下使用PHP生成Word文档的教程
2015/07/03 PHP
Yii2.0实现的批量更新及批量插入功能示例
2019/01/29 PHP
laravel框架模板之公共模板、继承、包含实现方法分析
2019/08/30 PHP
PHP加MySQL消息队列深入理解
2021/02/27 PHP
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
jQuery Tools Dateinput使用介绍
2012/07/14 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
2019/04/28 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
2019/05/05 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
使用PYTHON接收多播数据的代码
2012/03/01 Python
简单使用Python自动生成文章
2014/12/25 Python
Python机器学习算法之k均值聚类(k-means)
2018/02/23 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
pytorch 图像中的数据预处理和批标准化实例
2020/01/15 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
scrapy-splash简单使用详解
2021/02/21 Python
详解CSS3中使用gradient实现渐变效果的方法
2015/08/18 HTML / CSS
举例详解HTML5中使用JSON格式提交表单
2015/06/16 HTML / CSS
Linux上比较文件的命令都有哪些
2013/09/28 面试题
汽车检测与维修专业求职信
2013/10/30 职场文书
小学生寒假家长评语
2014/04/16 职场文书
美术兴趣小组活动总结
2014/07/07 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
2014年反腐倡廉工作总结
2014/12/05 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书
详解Java实现数据结构之并查集
2021/06/23 Java/Android