Home Web Front-end JS Tutorial React makes mobile phone data synchronization and display in the interface function

React makes mobile phone data synchronization and display in the interface function

May 02, 2018 am 11:55 AM
react Synchronize data

This time I will bring you the function of react to synchronize the display of mobile phone data on the interface. What are the precautions for react to synchronize the display of mobile phone data on the interface? The following is a practical case, let's take a look. . Requirements are as follows

    The length of the input content in the input box is greater than 0, and the preview information is displayed
  1. Leave the cursor and close the preview information
  2. Insert a
  3. special character

    _ every 4 digits in the preview information, and the input content remains unchanged

  4. The limit length is 13 Bit
  5. Only allows the input of 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
  7. Although the function is implemented, it must be a sub-component of a certain node There are two ways to call the parent component

1. Use refs to directly obtain the value of the child component 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 (
  <p className="App">
   <Zinput ref="zinput"></Zinput>
   <input type="button" value="获取电话号码的值22" onClick={ this.handerClick2 }/>
  </p> 
 );
}
Copy after login

2. Call the method passed by the parent component every time the focus of the child component leaves. , 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 mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Add loading during lazy loading process


babel conversion es6 method implementation

The above is the detailed content of React makes mobile phone data synchronization and display in the interface function. 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

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
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)

Open source! Beyond ZoeDepth! DepthFM: Fast and accurate monocular depth estimation! Open source! Beyond ZoeDepth! DepthFM: Fast and accurate monocular depth estimation! Apr 03, 2024 pm 12:04 PM

0.What does this article do? We propose DepthFM: a versatile and fast state-of-the-art generative monocular depth estimation model. In addition to traditional depth estimation tasks, DepthFM also demonstrates state-of-the-art capabilities in downstream tasks such as depth inpainting. DepthFM is efficient and can synthesize depth maps within a few inference steps. Let’s read about this work together ~ 1. Paper information title: DepthFM: FastMonocularDepthEstimationwithFlowMatching Author: MingGui, JohannesS.Fischer, UlrichPrestel, PingchuanMa, Dmytr

Use ddrescue to recover data on Linux Use ddrescue to recover data on Linux Mar 20, 2024 pm 01:37 PM

DDREASE is a tool for recovering data from file or block devices such as hard drives, SSDs, RAM disks, CDs, DVDs and USB storage devices. It copies data from one block device to another, leaving corrupted data blocks behind and moving only good data blocks. ddreasue is a powerful recovery tool that is fully automated as it does not require any interference during recovery operations. Additionally, thanks to the ddasue map file, it can be stopped and resumed at any time. Other key features of DDREASE are as follows: It does not overwrite recovered data but fills the gaps in case of iterative recovery. However, it can be truncated if the tool is instructed to do so explicitly. Recover data from multiple files or blocks to a single

One or more items in the folder you synced do not match Outlook error One or more items in the folder you synced do not match Outlook error Mar 18, 2024 am 09:46 AM

When you find that one or more items in your sync folder do not match the error message in Outlook, it may be because you updated or canceled meeting items. In this case, you will see an error message saying that your local version of the data conflicts with the remote copy. This situation usually happens in Outlook desktop application. One or more items in the folder you synced do not match. To resolve the conflict, open the projects and try the operation again. Fix One or more items in synced folders do not match Outlook error In Outlook desktop version, you may encounter issues when local calendar items conflict with the server copy. Fortunately, though, there are some simple ways to help

Google is ecstatic: JAX performance surpasses Pytorch and TensorFlow! It may become the fastest choice for GPU inference training Google is ecstatic: JAX performance surpasses Pytorch and TensorFlow! It may become the fastest choice for GPU inference training Apr 01, 2024 pm 07:46 PM

The performance of JAX, promoted by Google, has surpassed that of Pytorch and TensorFlow in recent benchmark tests, ranking first in 7 indicators. And the test was not done on the TPU with the best JAX performance. Although among developers, Pytorch is still more popular than Tensorflow. But in the future, perhaps more large models will be trained and run based on the JAX platform. Models Recently, the Keras team benchmarked three backends (TensorFlow, JAX, PyTorch) with the native PyTorch implementation and Keras2 with TensorFlow. First, they select a set of mainstream

The vitality of super intelligence awakens! But with the arrival of self-updating AI, mothers no longer have to worry about data bottlenecks The vitality of super intelligence awakens! But with the arrival of self-updating AI, mothers no longer have to worry about data bottlenecks Apr 29, 2024 pm 06:55 PM

I cry to death. The world is madly building big models. The data on the Internet is not enough. It is not enough at all. The training model looks like "The Hunger Games", and AI researchers around the world are worrying about how to feed these data voracious eaters. This problem is particularly prominent in multi-modal tasks. At a time when nothing could be done, a start-up team from the Department of Renmin University of China used its own new model to become the first in China to make "model-generated data feed itself" a reality. Moreover, it is a two-pronged approach on the understanding side and the generation side. Both sides can generate high-quality, multi-modal new data and provide data feedback to the model itself. What is a model? Awaker 1.0, a large multi-modal model that just appeared on the Zhongguancun Forum. Who is the team? Sophon engine. Founded by Gao Yizhao, a doctoral student at Renmin University’s Hillhouse School of Artificial Intelligence.

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

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,

The first robot to autonomously complete human tasks appears, with five fingers that are flexible and fast, and large models support virtual space training The first robot to autonomously complete human tasks appears, with five fingers that are flexible and fast, and large models support virtual space training Mar 11, 2024 pm 12:10 PM

This week, FigureAI, a robotics company invested by OpenAI, Microsoft, Bezos, and Nvidia, announced that it has received nearly $700 million in financing and plans to develop a humanoid robot that can walk independently within the next year. And Tesla’s Optimus Prime has repeatedly received good news. No one doubts that this year will be the year when humanoid robots explode. SanctuaryAI, a Canadian-based robotics company, recently released a new humanoid robot, Phoenix. Officials claim that it can complete many tasks autonomously at the same speed as humans. Pheonix, the world's first robot that can autonomously complete tasks at human speeds, can gently grab, move and elegantly place each object to its left and right sides. It can autonomously identify objects

See all articles