React (Silicon Valley) 03 event processing in react, uncontrolled components, controlled components, high-order functions, function coritization

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

Tags: Javascript Front-end React

Posted on Sat, 30 Oct 2021 22:57:42 -0400 by no3dfx

Programmer Help