qu'est-ce que le curry de réaction

Dans React, le currying est une technologie de haut niveau sur les fonctions. Il fait référence au formulaire d'encodage de fonction qui reçoit plusieurs paramètres et les traite finalement de manière uniforme en continuant à renvoyer des fonctions, il suffit de convertir la fonction. vous pouvez facilement obtenir les données de contrôle du formulaire lors du traitement du formulaire via le curry.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 17.0.1, ordinateur Dell G3.

Qu'est-ce que le curry de réaction ?

Currying de fonctions :

Continuez à renvoyer des fonctions via des appels de fonction, en obtenant une forme d'encodage de fonction qui accepte les paramètres plusieurs fois et les traite enfin de manière uniforme. -fonction d'ordre : Si une fonction répond à l'une des deux spécifications suivantes, la fonction est une fonction d'ordre supérieur

1. Si une fonction accepte un paramètre en tant que fonction, alors a peut être appelée une fonction d'ordre supérieur

2 . Si la valeur de retour d'un appel de fonction est toujours une fonction, alors a peut être appelée une fonction d'ordre supérieur

3. Les fonctions courantes d'ordre supérieur incluent : promise, setTimeout, arr.map, etc.

Les exemples sont. comme suit ;

Dans le formulaire, utilisez des composants contrôlés pour lier les données d'état afin d'afficher les données du formulaire au clic :

import React, {Component} from 'react';
export default class Form extends Component{
  state = {
    userName: '',
    password: ''
  }
  submitForm = (event) => {
    event.preventDefault() //阻止表单提交
    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}>
        用户名:<input type="text" name="userName" onChange={this.updateUserName}/>
        密码: <input type="password" name="password" onChange={this.updatePassword}/>
        <button>登录</button>
      </form>
    )
  }
}

Comme vous pouvez le voir, cette méthode est plus lourde lorsqu'il y a de nombreux éléments de formulaire, et vous pouvez utiliser la fonction currying Pour optimiser :

import React, {Component} from 'react';
export default class Form extends Component{
  state = {
    userName: '',
    password: ''
  }
  submitForm = (event) => {
    event.preventDefault() //阻止表单提交
    const {userName, password } = this.state;
    alert(`${userName}, ${password}`)
  }
  updateFormData = (key) => {
    return (event) => {
      this.setState({
        [key]: event.target.value,
      })
    }
  }
  render() {
    return (
      <form onSubmit={this.submitForm}>
        用户名:<input type="text" name="userName" onChange={this.updateFormData(&#39;userName&#39;)}/>
        密码: <input type="password" name="password" onChange={this.updateFormData(&#39;password&#39;)}/>
        <button>登录</button>
      </form>
    )
  }
}

La valeur de retour de this.updateFormData() est une fonction de rappel, liée à l'événement onChange, et le paramètre est event. De cette façon, le type peut être transmis lorsque le premier appel est effectué et la valeur peut être transmise lorsque l'événement de changement est déclenché.

Implémentation sans utiliser la fonction curry

Liez directement l'événement onChange en tant que rappel, et vous pouvez transmettre les paramètres de type et de valeur en même temps.

import React, {Component} from 'react';
export default class Form extends Component{
  state = {
    userName: '',
    password: ''
  }
  submitForm = (event) => {
    event.preventDefault() //阻止表单提交
    const {userName, password } = this.state;
    alert(`${userName}, ${password}`)
  }
  updateFormData = (key, event) => {
    this.setState({
      [key]: event.target.value,
    })
  }
  render() {
    return (
      <form onSubmit={this.submitForm}>
        用户名:<input type="text" name="userName" onChange={(event) => this.updateFormData(&#39;userName&#39;, event)}/>
        密码: <input type="password" name="password" onChange={(event) => this.updateFormData(&#39;password&#39;, event)}/>
        <button>登录</button>
      </form>
    )
  }
}

【Recommandations associées :

tutoriel vidéo javascript

,

front-end web

】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!