欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用react實(shí)現(xiàn)手機(jī)號(hào)的數(shù)據(jù)同步顯示功能的示例代碼

 更新時(shí)間:2018年04月03日 14:25:39   作者:朱陽(yáng)星  
本篇文章主要介紹了使用react實(shí)現(xiàn)手機(jī)號(hào)的數(shù)據(jù)同步顯示功能的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

本文介紹了使用react實(shí)現(xiàn)手機(jī)號(hào)的數(shù)據(jù)同步顯示功能的示例代碼,分享給大家,具體如下:

要求如下

  1. 輸入框輸入內(nèi)容數(shù)據(jù)長(zhǎng)度大于0,展示出預(yù)覽信息
  2. 光標(biāo)離開(kāi)關(guān)閉預(yù)覽信息
  3. 預(yù)覽信息每隔4位插入一個(gè)特殊字符_,輸入內(nèi)容不變
  4. 限制長(zhǎng)度為13位
  5. 只允許輸入數(shù)字(0-9)
// Zinput.js
import React, {
 Component
} from 'react';
import './Zinput.css'

// NOTE: 獲取焦點(diǎn)事件 原生onFocus 即可
// NOTE: 離開(kāi)焦點(diǎn)事件 原生onBlur即可
// NOTE: 輸入框數(shù)據(jù)過(guò)濾 直接在change方法里進(jìn)行過(guò)濾
// NOTE: 條件處理 通過(guò)不同條件返回不同節(jié)點(diǎn)做條件處理
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,
  });
 }
 /**
  * 根據(jù)字符串沒(méi)隔len位插入一個(gè)下滑杠,返回處理后的字符串
  * @method  getStr
  * @author 朱陽(yáng)星
  * @datetime 2018-04-02T09:57:58+080
  * @email  zhuyangxing@foxmail.com
  * @param  {String} str 待處理字符串
  * @param  {Number} len 每隔位數(shù)插入下滑杠
  * @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) {
   // 解決最后一位為補(bǔ)充項(xiàng)問(wèn)題
   newStr = newStr.substr(0, newStr.length - 1)
  }
  return newStr
 }
 render() {
  // NOTE return 需要用圓括號(hào)包住并處理
  // NOTE 條件語(yǔ)句里沒(méi)有節(jié)點(diǎn)也要用空字符串進(jìn)行處理 否則sonalint會(huì)報(bào)錯(cuò),頁(yè)面也會(huì)報(bào)錯(cuò)
  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!

<!-- 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;
}

功能雖然實(shí)現(xiàn),但是肯定是作為某個(gè)節(jié)點(diǎn)的某個(gè)子組件使用的,父組件調(diào)用方法有兩種

1.使用refs直接獲取子組件state的值

constructor(props) {
 super(props);
 this.handerClick2 = this.handerClick2.bind(this);
}
handerClick2(){
 // NOTE 父組件通過(guò)refs獲取子組件的state 
 console.log("使用ref獲取子組件的值",this.refs.zinput.state.value)
}
render() {
 return (
  <div className="App">
   <Zinput ref="zinput"></Zinput>
   <input type="button" value="獲取電話號(hào)碼的值22" onClick={ this.handerClick2 }/>
  </div> 
 );
}

2.每次子組件焦點(diǎn)離開(kāi)時(shí)調(diào)用父組件傳過(guò)來(lái)的方法,修改父組件state值

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 根據(jù)react的思想是在子組件處理完某件事的時(shí)候調(diào)用父組件的方法修改父組件的state值
 console.log("使用state獲取值",this.state.phoneNumber)
}
render() {
 return (
  <div className="App">
   <Zinput ref="zinput" chanegNumber={this.changePhoneNumber}></Zinput>
   <input type="button" value="獲取電話號(hào)碼的值" onClick={ this.handerClick }/>
  </div>
 );
}

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 一起來(lái)了解React的Hook

    一起來(lái)了解React的Hook

    這篇文章主要為大家詳細(xì)介紹了React的Hook,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助
    2022-03-03
  • React Native按鈕Touchable系列組件使用教程示例

    React Native按鈕Touchable系列組件使用教程示例

    這篇文章主要為大家介紹了React Native按鈕Touchable系列組件使用教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-11-11
  • React?跨端動(dòng)態(tài)化核心技術(shù)實(shí)例分析

    React?跨端動(dòng)態(tài)化核心技術(shù)實(shí)例分析

    這篇文章主要為大家介紹了React?跨端動(dòng)態(tài)化核心技術(shù)實(shí)例分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-10-10
  • React 條件渲染最佳實(shí)踐小結(jié)(7種)

    React 條件渲染最佳實(shí)踐小結(jié)(7種)

    這篇文章主要介紹了React 條件渲染最佳實(shí)踐小結(jié)(7種),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-09-09
  • react中如何使用局部樣式

    react中如何使用局部樣式

    這篇文章主要介紹了react中如何使用局部樣式問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • 關(guān)于getDerivedStateFromProps填坑記錄

    關(guān)于getDerivedStateFromProps填坑記錄

    這篇文章主要介紹了關(guān)于getDerivedStateFromProps填坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • React Form組件的實(shí)現(xiàn)封裝雜談

    React Form組件的實(shí)現(xiàn)封裝雜談

    這篇文章主要介紹了React Form組件的實(shí)現(xiàn)封裝雜談,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-05-05
  • React?18?如何更新?state?中的對(duì)象

    React?18?如何更新?state?中的對(duì)象

    state 中可以保存任意類(lèi)型的JavaScript值,包括對(duì)象,但是,不應(yīng)該直接修改存放在 React state 中的對(duì)象,這篇文章主要介紹了React?18更新state中的對(duì)象,需要的朋友可以參考下
    2023-08-08
  • ReactNative頁(yè)面跳轉(zhuǎn)Navigator實(shí)現(xiàn)的示例代碼

    ReactNative頁(yè)面跳轉(zhuǎn)Navigator實(shí)現(xiàn)的示例代碼

    本篇文章主要介紹了ReactNative頁(yè)面跳轉(zhuǎn)Navigator實(shí)現(xiàn)的示例代碼,具有一定的參考價(jià)值,有興趣的可以了解一下
    2017-08-08
  • React html中使用react的兩種方式

    React html中使用react的兩種方式

    這篇文章主要介紹了React html中使用react的兩種方式,本文給大家提到了React pwa的配置代碼,給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2021-04-04

最新評(píng)論