Javascript 在React组件中使用双箭头功能处理模糊

我一直在试图理解为什么我一直遵循的教程向我展示了在下面的输入字段中检查“模糊”的方法。我试图在不加咖喱的情况下重写这个方法，但似乎是不可能的。在React/JS方面有经验的人是否能够帮助解释发生了什么？我理解基本的咖喱，就像经典的例子：

常数乘法=（a）=>（b）=>a*b然后。。乘（5）（5）

但我不明白为什么它也能工作，除了我不需要像我在组件本身中创建的其他方法那样用“this”进行“绑定”之外。为了更好地理解这一点，到目前为止，野外没有任何材料能够清楚地了解正在发生的事情

import React, { Component } from 'react';
import { Form, FormGroup, Label, Input, Button, Col, FormFeedback } from 'reactstrap';

class RegistrationForm extends Component{
    constructor(props){
        super(props);

        //1
        this.state = {
            firstName: '',
            lastName: '',
            userName: '',
            phoneNum: '',
            email: '',
            agree: false,
            touched: {
                firstName: false,
                lastName: false,
                userName: false,
                phoneNum: false,
                email: false
            
            }
        }

        //3
        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

 ...

handleSubmit(event){
        console.log("Current state is: " + JSON.stringify(this.state));
        alert("Current state is: " + JSON.stringify(this.state));

        event.preventDefault();
    }

    **handleBlur = (property) => () => {
        this.setState({
            touched: {...this.state.touched, [property]:true}
        })
    }**
    
...
    render(){

        //Display "state" from "check" method
        const errors = this.check(this.state.firstName, this.state.lastName, this.state.userName, this.state.phoneNum, this.state.email);

        return(
            <div className="row row-content">
                <div className="col-12 mt-3">
                    <h2>Register for an Account & Stay Updated!</h2>
                    <hr />
                </div>
                <div className="col-md-10">

                    <Form onSubmit={this.handleSubmit}>
                        <FormGroup row>
                            <Label htmlFor="firstName" md={2}>First Name</Label>
                            <Col md={6}>
                                <Input
                                    type="text"
                                    id="firstName"
                                    placeholder='First Name'
                                    name="firstName"
                                    onChange={this.handleInputChange}
                                    onBlur={this.handleBlur("firstName")}
                                    invalid={errors.firstName}
                                    value={this.state.firstName}                                    
                                />
                                <FormFeedback>{errors.firstName}</FormFeedback>
                            </Col>
                        </FormGroup>
                     
                      ...
                        
                    </Form>
                </div>
            </div>
        )
    }
    
}


class Register extends Component {
    render(){
        return(
            <div className="container">
                <RegistrationForm />
            </div>

        )
    }
}

export default Register;

import React，{Component}来自'React'；
从“reactstrap”导入{Form，FormGroup，Label，Input，Button，Col，FormFeedback}；
类注册表单扩展组件{
建造师（道具）{
超级（道具）；
//1
此.state={
名字：''，
姓氏：“”，
用户名：“”，
phoneNum:“”，
电子邮件：“”，
同意：错，
感动：{
名字：false，
姓：假，
用户名：false，
phoneNum:false，
电子邮件：false
}
}
//3
this.handleInputChange=this.handleInputChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
...
handleSubmit（事件）{
log（“当前状态为：”+JSON.stringify（this.state））；
警报（“当前状态为：“+JSON.stringify（this.state））；
event.preventDefault（）；
}
**车把杆=（属性）=>（）=>{
这是我的国家({
触摸：{…this.state.toucted，[property]：true}
})
}**
...
render（）{
//通过“检查”方法显示“状态”
const errors=this.check（this.state.firstName、this.state.lastName、this.state.userName、this.state.phoneNum、this.state.email）；
返回(
注册帐户并保持更新！

名字
{errors.firstName}
...
)
}
}
类寄存器扩展组件{
render（）{
返回(
)
}
}
导出默认寄存器；

这里发生了两件事。该函数是curry和arrow函数

arow函数是该函数已从创建函数的上下文绑定的原因。因此，我们可以调用

this.setState

另一件事是咖喱

onBlur

期望得到一个函数，让我们调用它

fn

。并在您离开输入时调用此函数，可能带有类似

fn（event）

的事件。但是我们也希望给我们的函数一个字符串'firstName'，并给一个函数一个调用它的方法，所以我们返回一个函数，然后我们可以给

onBlur

你可以像这样重现咖喱部分

handleBlur(property) {
  return function() {
    // this would be the same point where
    // this.setState is called
    // but this is not bound here
  }
}

渲染期间调用的handleBlur函数。内部函数作为实际发生的事件的一部分被调用。我们使用箭头函数是因为它更容易编写，我们将

这个
绑定到我们期望的上下文中

这有助于你进一步理解它吗

编辑评论的答案：

是的，绑定必须发生在内部函数上，因为我们希望在内部函数中使用
this

您当然可以使用以下简单函数：

handleBlurFirstName() {
  this.setState({
    touched: {...this.state.touched, firstName:true}
  })
}

但是现在我们必须为我们想要处理的每个属性编写一个函数，并且必须在构造函数中绑定它。咖喱是一个非常有用的概念。
或者使用标识符调用处理程序
（名字）
，然后返回一个处理事件本身的函数，直观地隐藏正在发生的咖喱，或者在事件发生的地方捕捉事件，并将其传递给处理
（姓氏）（e）

我认为秒的方法更容易阅读和理解：）


handleInputChange=input=>console.log（input.target.value）；
handleBlur=key=>blurEvent=>this.setState（{[key]：blurEvent.target.value}）
submit=（）=>console.table（this.state）
渲染=（）=>(
this.handleBlur（'lastName'）（e）}
/>
提交
);
直接：

箭头函数中的关键字this是一个特殊的情况，不是因为使用了currying，您不需要绑定this，而是因为箭头函数


在那里做咖喱对你的案子没有帮助，可以简化为

handleBlur = (e, property) => {
         this.setState({
             touched: {...this.state.touched, [property]:true}
         })
      }


然后一经调用

   <input
          onBlur={e => this.handleBlur(e,'lastName')}
      />

this.handleBlur（e，'lastName'）}
/>

本教程试图避免的是必须冗长（而且您无论如何都不会这样做），因此使用咖喱会让您：

  <input
          onBlur={this.handleBlur('lastName')} //that it will return ANOTHER function
      />

你好，伊恩，谢谢你提供的信息！我以一种正常的方式写出了你的函数，看起来绑定现在发生在内部返回之后，而不是像其他方法的其他绑定一样发生在组件内部。我想现在我的另一个问题是，为什么我写这篇文章时没有内在的回报，而只是像其他人一样捆绑它？我觉得这很奇怪handleBlur（property）{return function（）{this.setState（{toucted:{…this.state.toucted，[property]：tr
  <input
          onBlur={this.handleBlur('lastName')} //that it will return ANOTHER function
      />