React ermöglicht die Synchronisierung und Anzeige von Mobiltelefondaten in der Schnittstellenfunktion

Dieses Mal stelle ich Ihnen die Funktion „Reagieren“ vor, um Mobiltelefondaten zu synchronisieren und auf der Benutzeroberfläche anzuzeigen Ein praktischer Fall. Die Anforderungen lauten wie folgt

Die Länge des Eingabeinhalts im Eingabefeld ist größer als 0 und die Vorschauinformationen werden angezeigt
Der Cursor geht, um die Vorschauinformationen zu schließen.
Fügen Sie alle 4 Ziffern ein
3. Sonderzeichen

   _ in die Vorschauinformationen ein, und der eingegebene Inhalt bleibt erhalten unverändert

Die maximale Länge beträgt 13 Bits
Nur ​​Zahlen (0-9) sind erlaubt

5. // 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;
   }

Obwohl die Funktion implementiert ist, muss sie als Unterkomponente eines bestimmten Knotens vorliegen. Es gibt zwei Methoden zum Aufrufen der übergeordneten Komponente

1. Verwenden Sie refs, um den Wert des untergeordneten Komponentenstatus direkt abzurufen

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. Rufen Sie die von der übergeordneten Komponente übergebene Methode jedes Mal auf, wenn der Fokus der untergeordneten Komponente verschwindet, und ändern Sie den Statuswert der übergeordneten Komponente.

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

Ich glaube, Sie beherrschen die Methode Nachdem Sie den Fall in diesem Artikel gelesen haben, lesen Sie bitte andere verwandte Artikel auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Laden während des verzögerten Ladevorgangs hinzufügen

Implementierung der Babel-Konvertierung es6-Methode

Das obige ist der detaillierte Inhalt vonReact ermöglicht die Synchronisierung und Anzeige von Mobiltelefondaten in der Schnittstellenfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!