本文介绍了使用react实现手机号的数据同步显示功能的示例代码,分享给大家,具体如下:

要求如下

输入框输入内容数据长度大于0,展示出预览信息
光标离开关闭预览信息
预览信息每隔4位插入一个特殊字符_,输入内容不变
限制长度为13位
只允许输入数字(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 [email protected]
* @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 踩坑指南

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

tags: gt,lt,state,value,Zinput,组件,div,props,newStr,NOTE,showBig,len,react,input
分页:12
转载请注明
本文标题:使用react实现手机号的数据同步显示功能的示例代码
本站链接:http://www.codesec.net/view/574901.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(20)