React implementiert die mobile Datenausgabe und -anzeige

Dieses Mal werde ich Ihnen die Implementierung der mobilen Datenausgabe und -anzeige mit React vorstellen. Was sind die Vorsichtsmaßnahmen für die Implementierung der mobilen Datenausgabe und -anzeige mit React? ein Blick.

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 erhalten unverändert

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

5. Ermöglicht nur die Eingabe von Zahlen (0-9)

// 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 bestimmte Unterkomponente eines Knotens verwendet werden. Es gibt zwei Möglichkeiten, die übergeordnete Komponente aufzurufen

1. Verwenden Sie Referenzen um den Wert des Unterkomponentenstatus direkt zu erhalten

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. Jedes Mal, wenn der Fokus der Unterkomponente verlassen wird, rufen Sie die von der übergeordneten Komponente übergebene Methode auf 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, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

ausführliche Erläuterung der domänenübergreifenden Schritte des Knotenservers

ausführliche Erläuterung des verzögerten Ladens von Vue-Routern (mit Code)

Das obige ist der detaillierte Inhalt vonReact implementiert die mobile Datenausgabe und -anzeige. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!