React は携帯電話番号のデータ同期を実装します

今回は、react を使用した携帯電話番号のデータ同期について説明します。react を使用して携帯電話番号のデータを同期するときに注意すべき注意事項は何ですか。一緒に見てください。

この記事では、Reactを使って携帯電話番号のデータ同期表示機能を実現するためのサンプルコードを紹介したいと思います。詳細は以下の通りです:

要件は以下の通りです

1. 。入力ボックスの入力内容データ長が0より大きく、プレビュー情報が表示されます

2. カーソルを離れてプレビュー情報を閉じます

3. プレビュー情報には4桁ごとに

   特殊文字_が挿入され、入力内容は変更されません

4. 長さは 13 桁に制限されています

5. 数字 (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;
}

関数は実装されていますが、特定の関数のサブコンポーネントとして使用する必要があります親コンポーネントを呼び出す方法は 2 つあります

1. refs を使用して子コンポーネントの状態の値を直接取得します

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. 子コンポーネントのフォーカスが離れるたびに、親によって渡されたメソッドを呼び出します。コンポーネントを使用して親コンポーネントの状態値を変更します

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vueフィルターの使用の詳細な説明

vue-routerは、ユーザーエクスペリエンスを向上させるために遅延読み込み中に読み込みプロンプトを追加します

以上がReact は携帯電話番号のデータ同期を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。