In React ist Currying eine High-Level-Funktionstechnologie. Es bezieht sich auf die Funktionscodierungsform, die mehrere Parameter empfängt und diese schließlich einheitlich verarbeitet, indem sie die Funktion nicht aufruft, sondern einfach durch Konvertieren von Funktionen Erhalten Sie bei der Verarbeitung von Formularen durch Currying problemlos Formularkontrolldaten.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.
Currying von Funktionen:
Durch die fortgesetzte Rückgabe von Funktionen über Funktionsaufrufe wird eine Funktionscodierungsform realisiert, die Parameter mehrfach akzeptiert und diese schließlich einheitlich verarbeitet.
Erweiterungen:
Funktion höherer Ordnung: Erfüllt eine Funktion eine der folgenden beiden Spezifikationen, handelt es sich bei der Funktion um eine Funktion höherer Ordnung
1. Wenn der Parameter, den eine Funktion akzeptiert, eine Funktion ist, kann a als Funktion höherer Ordnung bezeichnet werden
2. Wenn der Rückgabewert der Funktion a immer noch eine Funktion ist, kann a als Funktion höherer Ordnung bezeichnet werden.
3. Zu den gängigen Funktionen höherer Ordnung gehören: Promise, SetTimeout, arr.map usw.
Beispiele sind wie folgt;
Verwenden Sie im Formularformular kontrollierte Komponenten, um Statusdaten zu binden, um Formulardaten beim Klicken anzuzeigen:
import React, {Component} from 'react';Standardklasse exportieren Form erweitert Component{ state = { Benutzername: '', Passwort: '' } subscribeForm = (event) => { event.preventDefault() //Formularübermittlung verhindern const {userName, password } = this.state; warning(`${userName}, ${password}`) } updateUserName = (event) => { this.setState({ userName: event.target.value, }) } updatePassword = (event) => { this.setState({ Passwort: event.target.value, }) } render() { return ( <form onSubmit={this.submitForm}> Benutzername:<input type="text" name = "userName" onChange={this.updateUserName}/> Passwort: <input type="password" name="password" onChange={this.updatePassword}/> <button>Login</button> </form> ) } }Es ist ersichtlich, dass diese Methode umständlicher ist, wenn viele Formularelemente vorhanden sind. Funktionscurrying kann zur Optimierung verwendet werden:
import React, {Component} from 'react';Standardklasse exportieren Form erweitert Component{ state = { Benutzername: '', Passwort: '' } subscribeForm = (event) => { event.preventDefault() //Formularübermittlung verhindern const {userName, password } = this.state; warning(`${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' ) }/> Passwort: <input type="password" name="password" onChange={this.updateFormData('password')}/> <button>Login</button> </form> ) }}Der Rückgabewert von this.updateFormData() ist eine Rückruffunktion, die an das onChange-Ereignis gebunden ist, und der Parameter ist event. Auf diese Weise kann der Typ beim ersten Aufruf und der Wert beim Auslösen des Änderungsereignisses übergeben werden.
Implementierung ohne Funktionscurrying
Durch die direkte Bindung des onChange-Ereignisses als Rückruf können Sie sowohl Typ- als auch Wertparameter gleichzeitig übergeben.
import React, {Component} from 'react';Standardklasse exportieren Form erweitert Component{ state = { Benutzername: '', Passwort: '' } subscribeForm = (event) => { event.preventDefault() //Formularübermittlung verhindern const {userName, password } = this.state; warning(`${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 )}/> Passwort: <input type="password" name="password" onChange={(event) => this.updateFormData('password', event)}/> <button>Login</button> </ form > ) }}