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

本文介绍了使用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>
 );
}

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

您可能感兴趣的文章:

  • React Native实现简单的登录功能(推荐)
  • 深入理解JavaScript的React框架的原理
  • ReactNative页面跳转实例代码
  • 前端框架学习总结之Angular、React与Vue的比较详解
  • 使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
  • 深入理解React中es6创建组件this的方法
  • react-router JS 控制路由跳转实例
  • ReactNative之键盘Keyboard的弹出与消失示例
  • ReactNative 之FlatList使用及踩坑封装总结
  • 详解升级react-router 4 踩坑指南
(0)

相关推荐

  • React Native实现简单的登录功能(推荐)

    React Native 简介: React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 React 抽象操作系统原生的 UI 组件,代替 DOM 元素来渲染等. React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验.React Native 把重点放在所有开发人员关心的平台的开发效率上

  • 深入理解React中es6创建组件this的方法

    首发于:https://mingjiezhang.github.io/. 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的demo说起 Facebook最近一次更新react时,将es6中的class加入了组件的创建方式当中.Facebook也推荐组件创建使用通过定义一个继承自 React.Component 的class来定义一个组件类.官方的demo: class LikeButton extends React.Component

  • ReactNative之键盘Keyboard的弹出与消失示例

    在开发中经常遇到需要输入的地方,所以就学习了一下ReactNative键盘Keyboard的弹出与消失的方法,留个笔记. 今天我们来说下RN对键盘事件的支持. 在React-native 的Component组件中有个Keyboard. github地址如下:https://github.com/facebook/react-native/tree/770091f3c13f7c1bd77c50f979d89a774001fbf0/Libraries/Components/Keyboard 我们先

  • ReactNative页面跳转实例代码

    效果图如下所示: 进入工作目录,运行 react-native init NavigatorProject 创建项目NavigatorProject import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, TouchableHighlight, Image, Navigator } from 'react-native'; class navigatorProject exte

  • react-router JS 控制路由跳转实例

    Link组件用于正常的用户点击跳转,但是有时还需要表单跳转.点击按钮跳转等操作.这些情况怎么跟React Router对接呢? 下面是一个表单. <form onSubmit={this.handleSubmit}> <input type="text" placeholder="userName"/> <input type="text" placeholder="repo"/> <

  • 前端框架学习总结之Angular、React与Vue的比较详解

    近几年前端的技术发展很快,细分下来,主要可以分成四个方面: 1.开发语言技术,主要是ES6&7,coffeescript,typescript等: 2.开发框架,如Angular,React,Vue.js,Angular2等: 3.开发工具的丰富和前端工程化,像Grunt,Gulp,Webpack,npm,eslint,mocha这些技术: 4.前端开发范围的扩展,如服务端的nodejs,express,koa,meteor,GraphQL;移动端和跨平台的PhoneGap,ionic,Reac

  • ReactNative 之FlatList使用及踩坑封装总结

    在RN中FlatList是一个高性能的列表组件,它是ListView组件的升级版,性能方面有了很大的提升,当然也就建议大家在实现列表功能时使用FlatList,尽量不要使用ListView,更不要使用ScrollView.既然说到FlatList,那就先温习一下它支持的功能. 完全跨平台. 支持水平布局模式. 行组件显示或隐藏时可配置回调事件. 支持单独的头部组件. 支持单独的尾部组件. 支持自定义行间分隔线. 支持下拉刷新. 支持上拉加载. 支持跳转到指定行(ScrollToIndex). 今

  • 详解升级react-router 4 踩坑指南

    一.前言 上午把近日用React做的一个新闻项目所依赖的包升级到了最新的版本,其中从react-router(2.8.1)升级到react-router(4.1.2)中出现了很多问题, 故总结一下在升级过程中遇到的问题. 二.react-router,V4版本修改内容 1. 所有组件更改为从react-router-dom导入 之前的所有路由组件均是从react-router中导入,在我之前的项目中,导入相关组件如下: //v2 import {Router,Route,hashHistory}

  • 深入理解JavaScript的React框架的原理

    如果你在两个月前问我对React的看法,我很可能这样说: 我的模板在哪里?javascript中的HTML在做些什么疯狂的事情?JSX开起来非常奇怪!快向它开火,消灭它吧! 那是因为我没有理解它. 我发誓,React 无疑是在正确的轨道上, 请听我道来. Good old MVC 在一个交互式应用程序一切罪恶的根源是管理状态. "传统"的方式是MVC架构,或者一些变体. MVC提出你的模型是检验真理的唯一来源 - 所有的状态住在那里. 视图是源自模型,并且必须保持同步. 当模式的转变,

  • 使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果

    ReactJS是Facebook推出的产品.在2013年的Qcon大会(上海)上面,当时Facebook的前端工程师做过一次讲座,就专门介绍了ReactJS. ReactJS可以看做就是用来Render的.ReactJS是可以达到游戏级别的渲染,fps可以保持在60左右,相当的了不起,它做了一个虚拟dom tree加速了渲染过程,根据当时的数据说比angularjs快20%以上. 前沿 对于React, 去年就有耳闻, 挺不想学的, 前端那么多东西, 学了一个框架又有新框架要学

随机推荐