使用react實(shí)現(xiàn)手機(jī)號(hào)的數(shù)據(jù)同步顯示功能的示例代碼
本文介紹了使用react實(shí)現(xiàn)手機(jī)號(hào)的數(shù)據(jù)同步顯示功能的示例代碼,分享給大家,具體如下:
要求如下
- 輸入框輸入內(nèi)容數(shù)據(jù)長(zhǎng)度大于0,展示出預(yù)覽信息
- 光標(biāo)離開(kāi)關(guān)閉預(yù)覽信息
- 預(yù)覽信息每隔4位插入一個(gè)特殊字符_,輸入內(nèi)容不變
- 限制長(zhǎng)度為13位
- 只允許輸入數(shù)字(0-9)
// Zinput.js import React, { Component } from 'react'; import './Zinput.css' // NOTE: 獲取焦點(diǎn)事件 原生onFocus 即可 // NOTE: 離開(kāi)焦點(diǎn)事件 原生onBlur即可 // NOTE: 輸入框數(shù)據(jù)過(guò)濾 直接在change方法里進(jìn)行過(guò)濾 // NOTE: 條件處理 通過(guò)不同條件返回不同節(jié)點(diǎn)做條件處理 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, }); } /** * 根據(jù)字符串沒(méi)隔len位插入一個(gè)下滑杠,返回處理后的字符串 * @method getStr * @author 朱陽(yáng)星 * @datetime 2018-04-02T09:57:58+080 * @email zhuyangxing@foxmail.com * @param {String} str 待處理字符串 * @param {Number} len 每隔位數(shù)插入下滑杠 * @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) { // 解決最后一位為補(bǔ)充項(xiàng)問(wèn)題 newStr = newStr.substr(0, newStr.length - 1) } return newStr } render() { // NOTE return 需要用圓括號(hào)包住并處理 // NOTE 條件語(yǔ)句里沒(méi)有節(jié)點(diǎn)也要用空字符串進(jìn)行處理 否則sonalint會(huì)報(bào)錯(cuò),頁(yè)面也會(huì)報(bào)錯(cuò) 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; }
功能雖然實(shí)現(xiàn),但是肯定是作為某個(gè)節(jié)點(diǎn)的某個(gè)子組件使用的,父組件調(diào)用方法有兩種
1.使用refs直接獲取子組件state的值
constructor(props) { super(props); this.handerClick2 = this.handerClick2.bind(this); } handerClick2(){ // NOTE 父組件通過(guò)refs獲取子組件的state console.log("使用ref獲取子組件的值",this.refs.zinput.state.value) } render() { return ( <div className="App"> <Zinput ref="zinput"></Zinput> <input type="button" value="獲取電話號(hào)碼的值22" onClick={ this.handerClick2 }/> </div> ); }
2.每次子組件焦點(diǎn)離開(kāi)時(shí)調(diào)用父組件傳過(guò)來(lái)的方法,修改父組件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 根據(jù)react的思想是在子組件處理完某件事的時(shí)候調(diào)用父組件的方法修改父組件的state值 console.log("使用state獲取值",this.state.phoneNumber) } render() { return ( <div className="App"> <Zinput ref="zinput" chanegNumber={this.changePhoneNumber}></Zinput> <input type="button" value="獲取電話號(hào)碼的值" onClick={ this.handerClick }/> </div> ); }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- React Native實(shí)現(xiàn)簡(jiǎn)單的登錄功能(推薦)
- 深入理解JavaScript的React框架的原理
- ReactNative頁(yè)面跳轉(zhuǎn)實(shí)例代碼
- 前端框架學(xué)習(xí)總結(jié)之Angular、React與Vue的比較詳解
- 使用ReactJS實(shí)現(xiàn)tab頁(yè)切換、菜單欄切換、手風(fēng)琴切換和進(jìn)度條效果
- 深入理解React中es6創(chuàng)建組件this的方法
- react-router JS 控制路由跳轉(zhuǎn)實(shí)例
- ReactNative之鍵盤(pán)Keyboard的彈出與消失示例
- ReactNative 之FlatList使用及踩坑封裝總結(jié)
- 詳解升級(jí)react-router 4 踩坑指南
相關(guān)文章
React Native按鈕Touchable系列組件使用教程示例
這篇文章主要為大家介紹了React Native按鈕Touchable系列組件使用教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11React?跨端動(dòng)態(tài)化核心技術(shù)實(shí)例分析
這篇文章主要為大家介紹了React?跨端動(dòng)態(tài)化核心技術(shù)實(shí)例分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10React 條件渲染最佳實(shí)踐小結(jié)(7種)
這篇文章主要介紹了React 條件渲染最佳實(shí)踐小結(jié)(7種),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09關(guān)于getDerivedStateFromProps填坑記錄
這篇文章主要介紹了關(guān)于getDerivedStateFromProps填坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06React Form組件的實(shí)現(xiàn)封裝雜談
這篇文章主要介紹了React Form組件的實(shí)現(xiàn)封裝雜談,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05ReactNative頁(yè)面跳轉(zhuǎn)Navigator實(shí)現(xiàn)的示例代碼
本篇文章主要介紹了ReactNative頁(yè)面跳轉(zhuǎn)Navigator實(shí)現(xiàn)的示例代碼,具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08