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

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

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

}

}http://

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 ? (

) : ''

return (

type = "text"

onFocus={ this.inputOnFocus }

onBlur={ this.inputOnBlur }

value={ this.state.value }

onChange={ this.handleChange }>

{showBig}

)

}

}

export default Zinput; // Don't forget to use export default!

.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 (

);

}

2.每次子组件焦点离开时调用父组件传过来的方法，修改父组件state值

constructor(props) {

super(props);

this.state = {

phoneNumber: '',

};

this.handerClick = this.handerClick.bind(this)CWoMLXi;

this.changePhoneNumber = this.changePhoneNumber.bind(this);

}

changePhoneNumber(number){

this.setState({

phoneNumber: number,

})

}

handerClick(){

// NOTE 根据react的思想是在子组件处理完某件事的时候调用父组件的方法修改父组件的state值

console.log("使用state获取值",this.state.phoneNumber)

}

render() {

return (

);

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。