使用react实现手机号的数据同步显示功能的示例代码
本文介绍了使用react实现手机号的数据同步显示功能的示例代码，分享给大家，具体如下：
要求如下
- 输入框输入内容数据长度大于0，展示出预览信息
- 光标离开关闭预览信息
- 预览信息每隔4位插入一个特殊字符_,输入内容不变
- 限制长度为13位
- 只允许输入数字（0-9）
//Zinput.js
importReact,{
Component
}from'react';
import'./Zinput.css'
//NOTE:获取焦点事件原生onFocus即可
//NOTE:离开焦点事件原生onBlur即可
//NOTE:输入框数据过滤直接在change方法里进行过滤
//NOTE:条件处理通过不同条件返回不同节点做条件处理
classZinputextendsComponent{
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){
letval=event.target.value.substr(0,13)
.replace(/[^\d]/g,'')
event.target.value=val
this.setState({
value:val,
showBig:true,
});
}
/**
*根据字符串没隔len位插入一个下滑杠，返回处理后的字符串
*@methodgetStr
*@author朱阳星
*@datetime2018-04-02T09:57:58+080
*@emailzhuyangxing@foxmail.com
*@param{String}str待处理字符串
*@param{Number}len每隔位数插入下滑杠
*@return{String}处理后的字符串
*/
getStr(str,len){
letlenth=str.length
letlen1=len-1
letnewStr=''
for(vari=0;i0){
newStr+=str.charAt(i)+'_'
}else{
newStr+=str.charAt(i)
}
}
if(newStr.length%(len+1)===0){
//解决最后一位为补充项问题
newStr=newStr.substr(0,newStr.length-1)
}
returnnewStr
}
render(){
//NOTEreturn需要用圆括号包住并处理
//NOTE条件语句里没有节点也要用空字符串进行处理否则sonalint会报错，页面也会报错
constshowBig=this.state.showBig?(
{this.getStr(this.state.value,4)}
.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(