In React, currying is a high-level technology about functions. It refers to the function encoding form that receives multiple parameters and finally processes them uniformly by continuing to return functions. Currying does not call the function, but just By converting functions, you can easily obtain form control data when processing forms through currying.
The operating environment of this tutorial: Windows 10 system, react version 17.0.1, Dell G3 computer.
Currying of functions:
By continuing to return functions through function calls, a function encoding form that accepts parameters multiple times and finally processes them uniformly is realized.
Extensions:
Higher-order function: If a function meets one of the following two specifications, the function is a higher-order function
1. If the parameter a function accepts is a function, then a can be called a higher-order function
2. If the return value of function a is still a function, then a can be called a higher-order function.
3. Common higher-order functions include: promise, setTimeout, arr.map, etc.
Examples are as follows;
In the form form, use controlled components to bind state data to display form data on click:
import React, {Component} from 'react';export default class Form extends Component{ state = { userName: '', password: '' } submitForm = (event) => { event.preventDefault() //Prevent form submission const {userName, password } = this.state; alert(`${userName}, ${password}`) } updateUserName = (event) => { this.setState({ userName: event.target.value, }) } updatePassword = (event) => { this.setState({ password: event.target.value, }) } render() { return ( <form onSubmit={this.submitForm}> Username:<input type="text" name ="userName" onChange={this.updateUserName}/> Password: <input type="password" name="password" onChange={this.updatePassword}/> <button>Login</button> </form> ) } }It can be seen that this method is more cumbersome when there are many form items, and function currying can be used to optimize:
import React, {Component} from 'react';export default class Form extends Component{ state = { userName: '', password: '' } submitForm = (event) => { event.preventDefault() //Prevent form submission const {userName, password } = this.state; alert(`${userName}, ${password}`) } updateFormData = (key) => { return (event) => { this.setState({ [key]: event .target.value, }) } } render() { return ( <form onSubmit={this.submitForm}> Username:<input type="text" name="userName" onChange={this.updateFormData('userName' )}/> Password: <input type="password" name="password" onChange={this.updateFormData('password')}/> <button>Login</button> </form> ) }}The return value of this.updateFormData() is a callback function, bound to the onChange event, and the parameter is event. In this way, the type can be passed when the first call is made, and the value can be passed when the change event is triggered.
Implementation without function currying
Directly binding the onChange event as a callback allows you to pass both type and value parameters at the same time.
import React, {Component} from 'react';export default class Form extends Component{ state = { userName: '', password: '' } submitForm = (event) => { event.preventDefault() //Prevent form submission const {userName, password } = this.state; alert(`${userName}, ${password}`) } updateFormData = (key, event) => { this.setState({ [key]: event.target.value, }) } render() { return ( <form onSubmit={this.submitForm}> Username:<input type="text" name="userName" onChange={(event) => this.updateFormData('userName', event)}/> Password: <input type="password" name="password" onChange={(event) => this.updateFormData('password', event)}/> <button>Login</button> </ form> ) }}