使用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 ? (
      <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;
}

功能雖然實現，可是確定是做爲某個節點的某個子組件使用的，父組件調用方法有兩種

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

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

2.每次子組件焦點離開時調用父組件傳過來的方法，修改父組件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 根據react的思想是在子組件處理完某件事的時候調用父組件的方法修改父組件的state值
  console.log("使用state獲取值",this.state.phoneNumber)
}
render() {
  return (
    <div className="App">
      <Zinput ref="zinput" chanegNumber={this.changePhoneNumber}></Zinput>
      <input type="button" value="獲取電話號碼的值" onClick={ this.handerClick }/>
    </div>
  );
}