Dans React, la définition d'une fonction d'ordre supérieur est que si le paramètre reçu par une fonction spécifiée est une autre fonction ou si la valeur de retour de l'appel est toujours une fonction, alors la fonction spécifiée est appelée une fonction d'ordre supérieur commune ; -fonctions d'ordre Il y a Promise, setTimeout, "arr.map()" et ainsi de suite.
L'environnement d'exploitation de ce tutoriel : système Windows 10, version React 17.0.1, ordinateur Dell G3.
Fonction d'ordre supérieur : si une fonction répond à l'une des deux spécifications suivantes, alors la fonction est une fonction d'ordre supérieur.
1. Si le paramètre reçu par la fonction A est une fonction, alors A peut être appelée fonction d'ordre supérieur.
2. Si la valeur de retour de la fonction A est toujours une fonction, alors A peut être appelée une fonction d'ordre supérieur.
Les fonctions courantes d'ordre supérieur incluent : Promise, setTimeout, arr.map(), etc.
Les exemples sont les suivants :
Les cas suivants sont des fonctions d'ordre supérieur
saveFormData = (event)=>{return ()=>{console.log('@');}}<form onSubmit={this.handleSubmit}>Nom d'utilisateur :<input onChange={this.saveFormData('username' ) } type="text" name="username"/>Mot de passe : <input onChange={this.saveFormData('password')} type="password" name="password"/><button>Connexion</button> < /formulaire>a. this.saveFormData('username') utilise la valeur de retour de saveFormData comme rappel de onChange, et non saveFormData comme rappel.
b. Si vous utilisez this.saveFormData('username'), alors la fonction d'affectation saveFormData doit renvoyer quelque chose à onChange. Donnez la valeur de retour (fonction renvoyée) de la fonction d'affectation saveFormData à onChange comme rappel.
c. Nous imprimons donc le symbole '@' dans la fonction de retour de saveFormData, puis la valeur imprimée sera renvoyée à onChange et le symbole @ sera imprimé lors de la saisie dans la zone de saisie.
d. Le dataType transmis par saveFormData est en fait le nom d'utilisateur et le mot de passe.
e. Ce que nous appelons lors de la saisie doit être la fonction de retour. Return est le véritable rappel. React m'aide à transmettre l'événement lors du rappel. Grâce à event.target.value, nous pouvons obtenir la valeur que nous produisons.
saveFormData = (dataType)=>{// console.log(dataType);return (event)=>{// console.log('@');console.log(dataType,event.target.value);}}
f. Le contenu peut être généré. Nous pouvons utiliser setState pour le sauvegarder dans l'état.
this.setState({[dataType]:event.target.value})