Home Web Front-end JS Tutorial React implements data synchronization of mobile phone numbers

React implements data synchronization of mobile phone numbers

Apr 08, 2018 am 11:50 AM
react data

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 follows

  1. The data length of the input content in the input box is greater than 0, and the preview information is displayed

  2. Leave the cursor and close the preview information

  3. The preview information is inserted every 4 digits

    Special characters_, the input content remains unchanged

  4. The length is limited to 13 digits

  5. Only numbers (0- 9)

  6. // 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!
    Copy after login
    <!-- 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;
    }
    Copy after login
Although the function is implemented, it must be used as a sub-component of a certain node. There are two ways to call the parent component

1. Use refs Directly obtain the value of the state of the child component

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> 
 );
}
Copy after login
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>
 );
}
Copy after login
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

## Add loading prompts when vue-router is lazy loading to improve user experience

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusion System, Explained
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1677
14
PHP Tutorial
1279
29
C# Tutorial
1257
24
Slow Cellular Data Internet Speeds on iPhone: Fixes Slow Cellular Data Internet Speeds on iPhone: Fixes May 03, 2024 pm 09:01 PM

Facing lag, slow mobile data connection on iPhone? Typically, the strength of cellular internet on your phone depends on several factors such as region, cellular network type, roaming type, etc. There are some things you can do to get a faster, more reliable cellular Internet connection. Fix 1 – Force Restart iPhone Sometimes, force restarting your device just resets a lot of things, including the cellular connection. Step 1 – Just press the volume up key once and release. Next, press the Volume Down key and release it again. Step 2 – The next part of the process is to hold the button on the right side. Let the iPhone finish restarting. Enable cellular data and check network speed. Check again Fix 2 – Change data mode While 5G offers better network speeds, it works better when the signal is weaker

Tesla robots work in factories, Musk: The degree of freedom of hands will reach 22 this year! Tesla robots work in factories, Musk: The degree of freedom of hands will reach 22 this year! May 06, 2024 pm 04:13 PM

The latest video of Tesla's robot Optimus is released, and it can already work in the factory. At normal speed, it sorts batteries (Tesla's 4680 batteries) like this: The official also released what it looks like at 20x speed - on a small "workstation", picking and picking and picking: This time it is released One of the highlights of the video is that Optimus completes this work in the factory, completely autonomously, without human intervention throughout the process. And from the perspective of Optimus, it can also pick up and place the crooked battery, focusing on automatic error correction: Regarding Optimus's hand, NVIDIA scientist Jim Fan gave a high evaluation: Optimus's hand is the world's five-fingered robot. One of the most dexterous. Its hands are not only tactile

The U.S. Air Force showcases its first AI fighter jet with high profile! The minister personally conducted the test drive without interfering during the whole process, and 100,000 lines of code were tested for 21 times. The U.S. Air Force showcases its first AI fighter jet with high profile! The minister personally conducted the test drive without interfering during the whole process, and 100,000 lines of code were tested for 21 times. May 07, 2024 pm 05:00 PM

Recently, the military circle has been overwhelmed by the news: US military fighter jets can now complete fully automatic air combat using AI. Yes, just recently, the US military’s AI fighter jet was made public for the first time and the mystery was unveiled. The full name of this fighter is the Variable Stability Simulator Test Aircraft (VISTA). It was personally flown by the Secretary of the US Air Force to simulate a one-on-one air battle. On May 2, U.S. Air Force Secretary Frank Kendall took off in an X-62AVISTA at Edwards Air Force Base. Note that during the one-hour flight, all flight actions were completed autonomously by AI! Kendall said - "For the past few decades, we have been thinking about the unlimited potential of autonomous air-to-air combat, but it has always seemed out of reach." However now,

AI startups collectively switched jobs to OpenAI, and the security team regrouped after Ilya left! AI startups collectively switched jobs to OpenAI, and the security team regrouped after Ilya left! Jun 08, 2024 pm 01:00 PM

Last week, amid the internal wave of resignations and external criticism, OpenAI was plagued by internal and external troubles: - The infringement of the widow sister sparked global heated discussions - Employees signing "overlord clauses" were exposed one after another - Netizens listed Ultraman's "seven deadly sins" Rumors refuting: According to leaked information and documents obtained by Vox, OpenAI’s senior leadership, including Altman, was well aware of these equity recovery provisions and signed off on them. In addition, there is a serious and urgent issue facing OpenAI - AI safety. The recent departures of five security-related employees, including two of its most prominent employees, and the dissolution of the "Super Alignment" team have once again put OpenAI's security issues in the spotlight. Fortune magazine reported that OpenA

Integration of Java framework and front-end React framework Integration of Java framework and front-end React framework Jun 01, 2024 pm 03:16 PM

Integration of Java framework and React framework: Steps: Set up the back-end Java framework. Create project structure. Configure build tools. Create React applications. Write REST API endpoints. Configure the communication mechanism. Practical case (SpringBoot+React): Java code: Define RESTfulAPI controller. React code: Get and display the data returned by the API.

70B model generates 1,000 tokens in seconds, code rewriting surpasses GPT-4o, from the Cursor team, a code artifact invested by OpenAI 70B model generates 1,000 tokens in seconds, code rewriting surpasses GPT-4o, from the Cursor team, a code artifact invested by OpenAI Jun 13, 2024 pm 03:47 PM

70B model, 1000 tokens can be generated in seconds, which translates into nearly 4000 characters! The researchers fine-tuned Llama3 and introduced an acceleration algorithm. Compared with the native version, the speed is 13 times faster! Not only is it fast, its performance on code rewriting tasks even surpasses GPT-4o. This achievement comes from anysphere, the team behind the popular AI programming artifact Cursor, and OpenAI also participated in the investment. You must know that on Groq, a well-known fast inference acceleration framework, the inference speed of 70BLlama3 is only more than 300 tokens per second. With the speed of Cursor, it can be said that it achieves near-instant complete code file editing. Some people call it a good guy, if you put Curs

58 lines of code scale Llama 3 to 1 million contexts, any fine-tuned version is applicable 58 lines of code scale Llama 3 to 1 million contexts, any fine-tuned version is applicable May 06, 2024 pm 06:10 PM

Llama3, the majestic king of open source, the original context window is only... 8k, which makes me swallow back the words "it smells so good". Today, when 32k is the starting point and 100k is common, is this intentional to leave room for contributions to the open source community? The open source community certainly didn't miss this opportunity: now with just 58 lines of code, any fine-tuned version of Llama370b can automatically scale to 1048k (one million) contexts. Behind the scenes is a LoRA, extracted from a fine-tuned version of Llama370BInstruct that extends good context, and the file is only 800mb. Next, using Mergekit, you can run it with other models of the same architecture or merge it directly into the model. 1048k context used

Vue.js vs. React: Project-Specific Considerations Vue.js vs. React: Project-Specific Considerations Apr 09, 2025 am 12:01 AM

Vue.js is suitable for small and medium-sized projects and fast iterations, while React is suitable for large and complex applications. 1) Vue.js is easy to use and is suitable for situations where the team is insufficient or the project scale is small. 2) React has a richer ecosystem and is suitable for projects with high performance and complex functional needs.

See all articles