Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Basic concept

The React element’s event handling is similar to the DOM element’s, but there are a few syntactic differences:

  1. The event handler is specified via the onXxx (camelCase) property (case sensitive).
  • React uses custom (synthesized) events instead of native DOM events. — For better compatibility
  • Events in React are handled by event delegation (delegating to the outermost element of the component) — for efficiency
  1. The event handler’s default entry parameter isevent, can be accessed throughevent.targetGet the DOM element object where the event occurred.
<button onClick={activateLasers}>Activate Lasers</button>
Copy the code

Uncontrolled component

The form data of uncontrolled components is handed over to the DOM node for processing, and you can use the REF to retrieve the form data from the DOM node.

class Login extends React.Component {
  handleSubmit = (event) = > {
    event.preventDefault(); // Block form submission
    const { username, password } = this
    alert('User name:${username.value}And password:${password.value}`)}render() {
    return(
      <form onSubmit={this.handleSubmit}>User name:<input ref={c= >This. username = c} type="text" name="username"/><input ref={c= > this.password = c} type="password" name="password"/>
        <button>The login</button>
      </form>
    )
  }
}
ReactDOM.render(<Login />.document.getElementById("test"));
Copy the code

The controlled components

In a controlled component, form data is managed by the React component and a data handler should be written for each state update.

class Login extends React.Component {
  // Initialization state
  state = {
    username: ' '.password: ' '
  }
  // Save the user name to state
  saveUsername = (event) = > {
    this.setState({username: event.target.value})
  }
  // Save the password to state
  savePassword = (event) = > {
    this.setState({password: event.target.value})
  }
  // Form submission callback
  handleSubmit = (event) = > {
    event.preventDefault(); // Block form submission
    const { username, password } = this.state
    alert('User name:${username}And password:${password}`)}render() {
    return(
      <form onSubmit={this.handleSubmit}>User name:<input onChange={this.saveUsername} type="text" name="username"/>Password:<input onChange={this.savePassword} type="password" name="password"/>
        <button>The login</button>
      </form>
    )
  }
}
ReactDOM.render(<Login />.document.getElementById("test"));
Copy the code

Similar to the V-Model in Vue

Higher-order functions

A function is a higher-order function if it conforms to either of the following two specifications:

  1. If A function takes A function, then A can be called A higher-order function.
  2. A function can be called A higher-order function if the return value of the call is still A function.

Common higher-order functions: Promise, setTimeout, arr.map(), and so on

class Login extends React.Component {
  // Initialization state
  state = {
    username: ' '.password: ' '
  }
  
  // Save the form data to the state
  saveFormData = (dataType) = > {
    return (event) = > {
      this.setState([dataType]: event.target.value)
    }
  }
  
  // Form submission callback
  handleSubmit = (event) = > {
    event.preventDefault(); // Block form submission
    const { username, password } = this.state
    alert('User name:${username}And password:${password}`)}render() {
    return(
      <form onSubmit={this.handleSubmit}>User name:<input onChange={this.saveFormData('username')} type="text" name="username"/>Password:<input onChange={this.saveFormData('password')} type="password" name="password"/>
        <button>The login</button>
      </form>
    )
  }
}
ReactDOM.render(<Login />.document.getElementById("test"));
Copy the code

The React event handling property needs to receive a function, so when we call this.saveFormData(‘username’) we need to return an inner function that accepts an event object.

The function is currified

Through the function call to continue to return the function of the way, to achieve many times to receive parameters and finally unified processing of the function coding.

function sum(a) {
  return (b) = > {
    return (c) = > {
      return a + b + c
    }
  }
}
const result = sum(1) (2) (3)
console.log(result)
Copy the code

In the above example, saveFormData is applied to the function currization.

Nonfunctional Currization

class Login extends React.Component {
  // Initialization state
  state = {
    username: ' '.password: ' '
  }
  
  // Save the form data to the state
  saveFormData = (dataType, event) = > {
    this.setState([dataType]: event.target.value)
  }
  
  // Form submission callback
  handleSubmit = (event) = > {
    event.preventDefault(); // Block form submission
    const { username, password } = this.state
    alert('User name:${username}And password:${password}`)}render() {
    return(
      <form onSubmit={this.handleSubmit}>User name:<input onChange={(event)= >{this.saveFormData('username', event)}} type="text" name="username"<input onChange={(event)= > {this.saveFormData('username', event)}} type="password" name="password"/>
        <button>The login</button>
      </form>
    )
  }
}
ReactDOM.render(<Login />.document.getElementById("test"));
Copy the code

As long as you ensure that the React event handling property needs to receive a function, you can use the arrow function.