Use the React to implement the sample code of the data synchronization display function of the mobile phone number

This article introduces sample code for data synchronization display functions using Rect to implement mobile phone numbers, shared to everyone, specifically as follows:

    input box input The content data length is greater than 0, and the preview information
  1. cursor leaves the shutdown preview information
  2. Preview information is inserted every 4 bits into one special character _, the input content is unchanged
  3. Length is 13
  4. only allows input numbers (0-9)
// Zinput.jsimport React, {Component} from ‘React ‘; import’ ./zinput.css’// NOTE: Get focus event native onfocus 即 // NOTE: Leave the focus event native Onblur 即 // NOTE: Enter box data filtering directly in the Change method // Note : Conditional Processing Back to Different Nodes Conditions Conditions Class Zinput Extends Component {Constructor (Props) {Value: ”, Showbig: false,}; this.handlechange = this.handlechange =}; .bind (this); this.inputonfocus = this.inputonfocus.bind (this); this.inputonblur = this.inputonblur.bind (this);} infutonfocus () {if (this.state.value.length> 0) { THIS.SETSTATE ({Showbig: true})}}}}} Inputonblur () {this.SetState ({showbig: false}) {this.props.chanegnum (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,});} / ** * According to the string, the LEN bit is inserted into a lower leam, return to the processing string * @Method getstr * @author Zhu Yangxing * @datetime 2018-04-02T09: 57: 58 + 080 * @Email Zhuyangxing@foxmail.com * @Param {string} STR standby string * @Param {Number} LEN Each bit number inserted into the led string * / getStr after processed * / GetStr (Str, LEEN) {let lenth = str.length let le1 = le – 1 let newstr = ” for (var i = 0; i
 0) {newstr + = str.Charat (i) + '_'} else { Newstr + = Str.Charat (i)}}}} (newstr.length% (LEN + 1) === 0) {// Solve the last one is supplement problem newstr = newstr.substr (0, newstr.length - 1)} return newstr} render () {// Note Return requires parentheses and processes the // Note Condition statement There is no node in the Note Condition statement to handle the Sonalint will report an error, the page will also report error filebig = this.State.showbig? ( {this.State.Value, 4)} ): '' Return (
}}}}}}}}}}}}}} export default zinput; // DON '
.zinput {Position: absolute; TOP: 80px; Left: 40px;} {Position: {POSI 0; Left: 0;}. Big-show {position: relative; top: -40px; font-size: 36px; line-height: 40px; background-color: red;} [@ h
The function is implemented, but it is definitely a certain node.The parent component call method is used, and the parent component call method has two
  1. Use REFS directly to obtain the value of sub-component state   
Constructor (PrOPS) {Super (PROPS); this.handerclick2 = this.handerclick2.bind (this);} HanderClick2 () {// Note Parent component State Console.log (“Use REF to get the value of subcaps with REF” by REFS. Render () {RETURN (

);}

);}
  
2. The method of calling the parent component is called when the parent component is transferred, and the parent component state value

 [PROPS); this.State = { phoneNumber: '',}; this.handerClick = this.handerClick.bind (this); this.changePhoneNumber = this.changePhoneNumber.bind (this);} changePhoneNumber (number) {this.setState ({phoneNumber: number,}) } HanderClick () {// Note The method of calling the parent component when the subcomponent is handled, modify the state value console.log ("uses State Getting Value", this.statE.Phonenumber)} render () {RETURN ( 
);}
The above is all the contents of this article I hope to help everyone, I hope everyone will support Tumi Clouds.
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment