Eingabedaten reagieren und synchronisieren

Dieses Mal werde ich Ihnen die Eingabe und Synchronisierung von Reaktionsdaten vorstellen. Was sind die Vorsichtsmaßnahmen für die Eingabe und Synchronisierung von Reaktionsdaten? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Die Anforderungen lauten wie folgt

1. Die Länge des Eingabeinhalts im Eingabefeld ist größer als 0 und die Vorschauinformationen werden angezeigt

2. Der Cursor geht, um die Vorschauinformationen zu schließen

3. Fügen Sie alle 4 Ziffern ein Sonderzeichen_ in die Vorschauinformationen ein, und der eingegebene Inhalt bleibt unverändert

4. Die maximale Länge beträgt 13 Ziffern

5. Es dürfen nur Zahlen (0-9) eingegeben werden

// 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!

rrree

Allerdings Wenn die Funktion implementiert ist, muss sie als Unterkomponente eines Knotens verwendet werden und die übergeordnete Komponente ruft zwei Methoden auf:

1 Verwenden Sie refs, um den Statuswert der Unterkomponente direkt zu erhalten

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

2. Rufen Sie jedes Mal, wenn der Fokus der Unterkomponente verschwindet, die von der übergeordneten Komponente übergebene Methode auf, um den Statuswert der übergeordneten Komponente zu ändern.

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

Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall gelesen haben Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie man Vue+Mint-UI im Projekt verwendet

Wie man Vue zum Erstellen verwendet eine einzelne Seite Front-End-Routing anwenden

Das obige ist der detaillierte Inhalt vonEingabedaten reagieren und synchronisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!