为什么在函数内部未使用事件参数时，此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传递value字段并返回带有事件作为输入的函数，几乎是这样的：

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

您可以使用自己的示例在这里找到很好的解释：

What do multiple arrow functions mean in javascript?

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