리액트 커링이 뭐야?

React에서 커링은 함수에 대한 고급 기술입니다. 여러 매개변수를 받아 최종적으로 함수를 계속 반환하여 균일하게 처리하는 함수 인코딩 형식을 말합니다. 커링을 통해 양식을 처리할 때 양식 제어 데이터를 쉽게 얻을 수 있습니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

리액트 커링이란 무엇인가요?

함수 커링:

계속해서 함수 호출을 통해 함수를 반환하여 매개변수를 여러 번 받아들이고 최종적으로 이를 균일하게 처리하는 함수 인코딩 형식을 얻습니다. -순서 함수: 함수가 다음 두 가지 사양 중 하나를 충족하면 해당 함수는 고차 함수입니다

1. 함수가 매개변수를 함수로 받아들이면 해당 함수를 고차 함수라고 부를 수 있습니다

2 . 함수 호출의 반환 값이 여전히 함수인 경우 a는 고차 함수라고 부를 수 있습니다.

3. 일반적인 고차 함수에는 promise, setTimeout, arr.map 등이 있습니다.

예는 다음과 같습니다.

양식 양식에서 제어된 구성 요소를 사용하여 상태 데이터를 바인딩하여 클릭 시 양식 데이터를 표시합니다.

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

보시다시피 이 방법은 양식 항목이 많을 때 더 번거롭고 커링 함수를 사용하여 최적화할 수 있습니다.

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

this.updateFormData()의 반환 값은 onChange 이벤트에 바인딩된 콜백 함수이며 매개변수는 이벤트입니다. 이런 방식으로 첫 번째 호출이 이루어질 때 유형이 전달되고, 변경 이벤트가 트리거될 때 값이 전달될 수 있습니다.

카레 함수를 사용하지 않고 구현

onChange 이벤트를 콜백으로 직접 바인딩하고 유형 매개변수와 값 매개변수를 동시에 전달할 수 있습니다.

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

【관련 추천:

javascript 비디오 튜토리얼

,

web front-end

】

위 내용은 리액트 커링이 뭐야?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!