武汉微信小程序_使用react完成手机号的数据同步

摘要: 应用react完成手机上号的数据信息同歩显示信息作用的实例编码 文中详细介绍了应用react完成手机上号的数据信息同歩显示信息作用的实例编码,共享给大伙儿,实际以下:规定以...

使用react实现手机号的数据同步显示功能的示例代码       本篇文章主要介绍了使用react实现手机号的数据同步显示功能的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

要求如下

输入框输入内容数据长度大于0,展示出预览信息 光标离开关闭预览信息 预览信息每隔4位插入一个特殊字符_,输入内容不变 限制长度为13位 只允许输入数字(0-9)
// NOTE: 输入框数据过滤 直接在change方法里进行过滤 // NOTE: 条件处理 通过不同条件返回不同节点做条件处理 class Zinput extends Component { constructor(pro凡科抠图) { super(pro凡科抠图); 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.pro凡科抠图.chanegNumber){ this.pro凡科抠图.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 T+080 * @email zhuyangxing * @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!

功能虽然实现,但是肯定是作为某个节点的某个子组件使用的,父组件调用方法有两种

1.使用refs直接获取子组件state的值

constructor(pro凡科抠图) {
 super(pro凡科抠图);
 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" this.handerClick2 }/ 
 /div 

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

constructor(pro凡科抠图) {
 super(pro凡科抠图);
 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="获取电话号码的值" this.handerClick }/ 
 /div 

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




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:自助建站