apa itu karipap bertindak balas

Dalam React, karipap ialah teknologi peringkat tinggi tentang fungsi Ia merujuk kepada borang pengekodan fungsi yang menerima berbilang parameter dan akhirnya memprosesnya secara seragam dengan terus mengembalikan fungsi Fungsi tidak akan dipanggil fungsi akan ditukar Melalui kari, data kawalan borang boleh diperolehi dengan mudah semasa memproses borang.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 17.0.1, komputer Dell G3.

Apakah itu react currying

Currying of functions:

Teruskan untuk mengembalikan fungsi melalui panggilan fungsi untuk mencapai penerimaan berbilang parameter dan pemprosesan bersatu akhir borang pengekodan Fungsi.

sambungan:

Fungsi tertib tinggi: Jika fungsi memenuhi salah satu daripada dua spesifikasi berikut, fungsi itu ialah fungsi tertib tinggi

1. Jika parameter yang diterima oleh fungsi a ialah fungsi, maka a boleh dipanggil fungsi tertib lebih tinggi

2. Jika fungsi a, nilai pulangan panggilan masih merupakan fungsi, maka a boleh dipanggil fungsi tertib tinggi

3. Fungsi tertib tinggi biasa termasuk: promise, setTimeout, arr.map, dsb.

Contoh adalah seperti berikut; >

Dalam borang, gunakan komponen terkawal untuk mengikat data keadaan untuk memaparkan data borang dengan klik:

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

Anda boleh melihatnya ini Kaedah ini menyusahkan apabila terdapat banyak item borang, dan anda boleh menggunakan fungsi kari untuk mengoptimumkan:

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

Nilai pulangan this.updateFormData() ialah fungsi panggil balik, terikat pada acara onChange, dan parameter adalah peristiwa. Dengan cara ini, jenis boleh dihantar apabila panggilan pertama dibuat, dan nilai boleh dihantar apabila peristiwa perubahan dicetuskan.

Pelaksanaan tanpa menggunakan fungsi kari

Ikat terus acara onChange sebagai panggilan balik, yang boleh melepasi kedua-dua jenis dan parameter nilai pada masa yang sama.

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

[Cadangan berkaitan:

tutorial video javascript, bahagian hadapan web]

Atas ialah kandungan terperinci apa itu karipap bertindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!