javascript - 为什么这个handleBlur函数带有事件参数，而函数内部没有使用事件参数呢？

Question

你能帮我理解为什么下面这个函数在函数内部没有使用事件参数时有事件参数吗？

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

为什么当我尝试时下面的这个功能不起作用？

handleBlur(field) {
    this.setState({
        touched: { ...this.state.touched, [field]: true }
    })
}

该函数的使用如下:

<FormGroup row>
                                <Label htmlFor='firstname' md={2}>First Name</Label>
                                <Col md={10}>
                                    <Input type='text' id='firstname' name='firstname'
                                        placeholder='First Name'
                                        value={this.state.firstname}
                                        valid={errorMessages.firstname === ''}
                                        invalid={errorMessages.firstname !== ''}
                                        onChange={this.handleInputChange}
                                        onBlur={this.handleBlur('firstname')}
                                    />
                                    <FormFeedback>{errorMessages.firstname}</FormFeedback>
                                </Col>
                            </FormGroup>

Answer 1

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

这是一个双箭头函数，在这种情况下，函数handleBlur传递值字段并返回一个以事件作为输入的函数，几乎像这样:

    function handleBlur(field) {
     return function(event) {
        //do something
     }
    }

您可以在这里找到一个非常好的解释，使用您自己的示例:

What do multiple arrow functions mean in javascript?

我不知道为什么该代码没有使用该事件，但它就在那里。