1. Event handling in react
- Time handling specifies the event handling function through the onXxxx property
- react uses custom (composite) events instead of native dom time
- Events in react are handled through event delegation (delegated to the outermost element of the component)
- Get the dom element object of the event through event.target
- Do not overuse ref
2. Uncontrolled components
Component classification containing the form
a. Controlled components
b. Uncontrolled components
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--To import the core library, first the core library, and then rect-dom operation dom Library, last babel Pay attention to the order--> <script src="../js/react.development.js"></script> <script src="../js/react-dom.development.js"></script> <script src="../js/babel.min.js"></script> <script src="../js/prop-types.js"></script> </head> <body> <div id="app"> </div> <!-- Default cannot be written below js,Must write type And yes bable,the truth is that jax --> <script type="text/babel"> //Create class component class Login extends React.Component{ handleSubmit=(event)=>{ event.preventDefault() const {username,password}=this alert(`The user name you entered is ${username.value},The password is:${password.value}`) } render(){ return ( <form onSubmit={this.handleSubmit}> <input type="text" ref={(currentNode)=>this.username=currentNode}name="username"/> <input type="text" ref={(currentNode)=>this.password=currentNode} name="password"/> <button>Submit</button> </form> ) } } //Render class components ReactDOM.render(<Login/>,document.getElementById('app')) </script> </body> </html>
3. Controlled components
The data of the controlled components are maintained in the state and retrieved on demand, which is similar to the two-way data binding in vue
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--To import the core library, first the core library, and then rect-dom operation dom Library, last babel Pay attention to the order--> <script src="../js/react.development.js"></script> <script src="../js/react-dom.development.js"></script> <script src="../js/babel.min.js"></script> <script src="../js/prop-types.js"></script> </head> <body> <div id="app"> </div> <!-- Default cannot be written below js,Must write type And yes bable,the truth is that jax --> <script type="text/babel"> //Create class component class Login extends React.Component{ state={ username:'', password:'' } handleSubmit=(event)=>{ event.preventDefault() const {username,password}=this.state alert(`The user name you entered is ${username},The password is:${password}`) } saveUsername=(event)=>{ this.setState({username:event.target.value}) } savePassword=(event)=>{ this.setState({password:event.target.value}) } render(){ return ( <form onSubmit={this.handleSubmit}> <input type="text" onChange={this.saveUsername} name="username"/> <input type="text" onChange={this.savePassword} name="password"/> <button>Submit</button> </form> ) } } //Render class components ReactDOM.render(<Login/>,document.getElementById('app')) </script> </body> </html>
4. Higher order function
- The callback function must be a function name, not the execution call of the function (using parentheses), because the executor calls the corresponding function according to the function name when the event occurs
render(){ return ( <form onSubmit={this.handleSubmit}> <input type="text" onChange={this.saveFormdata('username')} name="username"/> <input type="text" onChange={this.saveFormdata('password')} name="password"/> <button>Submit</button> </form> ) }
- Sometimes we use parentheses when writing. We should treat them differently. On the surface, we call the function directly, but we should enter the function to see if it returns a function. as follows
saveFormdata=(dataType)=>{ return (event)=>{ //In order to resolve the dataType, the formal parameter dataType needs to be enclosed in square brackets this.setState({[dataType]:event.target.value}) } }
The above function is actually a higher-order function
-Definition of higher order function
If a function conforms to any of the following two specifications, it is a high-order function
a. If the parameter received by a function is a function, a can be called a higher-order function
b. If the return value of A function is still A function, then A can be called A higher-order function
5. Function coritization
The function coding form of receiving parameters for many times and finally unified processing is realized by the way that the function continues to return the function
The following code is actually written in Coriolis
saveFormdata=(dataType)=>{ return (event)=>{ //In order to resolve the dataType, the formal parameter dataType needs to be enclosed in square brackets this.setState({[dataType]:event.target.value}) } }