Di React, currying adalah teknologi tingkat tinggi tentang fungsi. Ini mengacu pada bentuk pengkodean fungsi yang menerima banyak parameter dan akhirnya memprosesnya secara seragam dengan terus mengembalikan fungsi dengan mudah mendapatkan data kontrol formulir saat memproses formulir melalui kari.
Lingkungan operasi tutorial ini: Sistem Windows 10, reaksi versi 17.0.1, komputer Dell G3.
Fungsi kari:
Dengan terus mengembalikan fungsi melalui pemanggilan fungsi, bentuk pengkodean fungsi yang menerima parameter beberapa kali dan akhirnya memprosesnya secara seragam akan terwujud.
Ekstensi:
Fungsi tingkat tinggi: Jika suatu fungsi memenuhi salah satu dari dua spesifikasi berikut, fungsi tersebut merupakan fungsi tingkat tinggi
1. Jika parameter yang diterima suatu fungsi adalah suatu fungsi, maka a dapat disebut fungsi tingkat tinggi
2. Jika nilai kembalian fungsi a masih berupa fungsi, maka a dapat disebut fungsi tingkat tinggi.
3. Fungsi umum tingkat tinggi meliputi: janji, setTimeout, arr.map, dll.
Contohnya adalah sebagai berikut;
Dalam formulir formulir, gunakan komponen terkontrol untuk mengikat data status guna menampilkan data formulir saat diklik:
import React, {Component} from 'react';export default class Form extends Component{ state = { nama pengguna: '', kata sandi: '' } submitForm = (event) => { event.preventDefault() //Mencegah pengiriman formulir const {namapengguna, kata sandi } = this.state; alert(`${userName}, ${password}`) } updateUserName = (event) => { this.setState({ userName: event.target.value, }) } updatePassword = (event) => { this.setState({ kata sandi: event.target.value, }) } render() { return ( <form onSubmit={this.submitForm}> Nama pengguna:<input type="text" name = "userName" onChange={this.updateUserName}/> Kata sandi: <input type="password" name="password" onChange={this.updatePassword}/> <button>Login</button> </form> ) } }Terlihat bahwa metode ini lebih rumit jika item formulirnya banyak, dan fungsi currying dapat digunakan untuk mengoptimalkan:
import React, {Component} from 'react';export default class Form extends Component{ state = { nama pengguna: '', kata sandi: '' } submitForm = (event) => { event.preventDefault() //Mencegah pengiriman formulir const {namapengguna, kata sandi } = this.state; alert(`${userName}, ${password}`) } updateFormData = (kunci) => { return (acara) => { this.setState({ [kunci]: acara .target.value, }) } } render() { return ( <form onSubmit={this.submitForm}> Nama pengguna:<input type="text" name="userName" onChange={this.updateFormData('userName' ) }/> Kata sandi: <input type="password" name="password" onChange={this.updateFormData('password')}/> <button>Masuk</button> </form> ) }}Nilai kembalian this.updateFormData() adalah fungsi panggilan balik, terikat pada peristiwa onChange, dan parameternya adalah peristiwa. Dengan cara ini, tipe dapat diteruskan saat panggilan pertama dilakukan, dan nilai dapat diteruskan saat peristiwa perubahan dipicu.
Implementasi tanpa fungsi kari
Mengikat langsung peristiwa onChange sebagai panggilan balik memungkinkan Anda meneruskan parameter tipe dan nilai secara bersamaan.
import React, {Component} from 'react';export default class Form extends Component{ state = { nama pengguna: '', kata sandi: '' } submitForm = (event) => { event.preventDefault() //Mencegah pengiriman formulir const {namapengguna, kata sandi } = this.state; alert(`${userName}, ${password}`) } updateFormData = (kunci, peristiwa) => { this.setState({ [kunci]: peristiwa.target.nilai, }) } render() { return ( <form onSubmit={this.submitForm}> Nama pengguna:<input type="text" name="userName" onChange={(event) => this.updateFormData('userName', event )}/> Kata sandi: <input type="password" name="password" onChange={(event) => this.updateFormData('password', event)}/> <button>Login</button> </form > ) }}