Was ist Reaktionscurry?

Currying ist eine High-Level-Technologie für Funktionen. Es bezieht sich auf die Funktionscodierungsform, die mehrere Parameter empfängt und diese schließlich einheitlich verarbeitet, indem sie weiterhin Funktionen aufruft Sie können die Formularsteuerdaten einfach durch Currying abrufen, wenn Sie das Formular verarbeiten.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.

Was ist React Currying?

Currying von Funktionen:

Funktionen weiterhin durch Funktionsaufrufe zurückgeben, wodurch eine Funktionscodierungsform erreicht wird, die Parameter mehrfach akzeptiert und schließlich einheitlich verarbeitet Funktion höherer Ordnung: Wenn eine Funktion eine der folgenden beiden Spezifikationen erfüllt, ist die Funktion eine Funktion höherer Ordnung

1. Wenn eine Funktion einen Parameter als Funktion akzeptiert, kann a als Funktion höherer Ordnung bezeichnet werden

2 . Wenn der Rückgabewert eines Funktionsaufrufs 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';
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>
    )
  }
}

Wie Sie sehen können, ist diese Methode umständlicher, wenn es viele Formularelemente gibt, und Sie können die Funktion Currying zur Optimierung verwenden:

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>
    )
  }
}

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 Verwendung der Funktion Curry

Binden Sie das onChange-Ereignis direkt als Rückruf, und Sie können sowohl Typ- als auch Wertparameter gleichzeitig übergeben.

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>
    )
  }
}

【Verwandte Empfehlungen: Javascript-Video-Tutorial

,

Web-Frontend

】

Das obige ist der detaillierte Inhalt vonWas ist Reaktionscurry?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!