Home >Web Front-end >JS Tutorial >React implements data synchronization of mobile phone numbers
This time I will bring you react to realize the data synchronization of mobile phone numbers. What are the precautions for react to realize the data synchronization of mobile phone numbers? The following is a practical case, let's take a look.
This article introduces the sample code for using react to realize the data synchronization display function of mobile phone numbers and shares it with everyone. The details are as follows: The requirements are as followsSpecial characters_, the input content remains unchanged
// 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 ? ( <p className="big-show">{ this.getStr(this.state.value,4) }</p> ) : '' return ( <p className="zInput"> <input className="input" type = "text" onFocus={ this.inputOnFocus } onBlur={ this.inputOnBlur } value={ this.state.value } onChange={ this.handleChange }> </input> {showBig} </p> ) } } 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; }
constructor(props) { super(props); this.handerClick2 = this.handerClick2.bind(this); } handerClick2(){ // NOTE 父组件通过refs获取子组件的state console.log("使用ref获取子组件的值",this.refs.zinput.state.value) } render() { return ( <p className="App"> <Zinput ref="zinput"></Zinput> <input type="button" value="获取电话号码的值22" onClick={ this.handerClick2 }/> </p> ); }2. Every time the focus of the child component leaves, call the method passed by the parent component and modify the state value of the parent component
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 ( <p className="App"> <Zinput ref="zinput" chanegNumber={this.changePhoneNumber}></Zinput> <input type="button" value="获取电话号码的值" onClick={ this.handerClick }/> </p> ); }I believe you have read the case in this article After mastering the method, please pay attention to other related articles on the php Chinese website for more exciting content! Recommended reading:
Detailed explanation of the use of Vue filter
The above is the detailed content of React implements data synchronization of mobile phone numbers. For more information, please follow other related articles on the PHP Chinese website!