Question

您好，有人可以在下面的示例中向我解释这种计算方式吗？

我可以理解的 name 参数，但事件呢？怎么做？

 <TextField
          placeholder="Name"
          InputLabelProps={{
            shrink: true,
          }}
          className={classes.textfield}
          value={name}
          onChange={this.handleChange('name')}
 />

 handleChange = name => (event) => {
    this.setState({
      [name]: event.target.value,
 });
};

问候

Answer 1

考虑以下代码

handleChange = name => (event) => {
    this.setState({
      [name]: event.target.value,
 });

为

constructor() {
   super();
   this.handleChange = this.handleChange.bind(this);
}

 handleChange(name){
   return (event) => {
      this.setState({
        [name]: event.target.value,
       });
   }
}

因此，基本上像this.handleChange('name')这样调用handleChange会将函数返回到onChange事件。触发onChange时，将使用event参数调用此方法。现在，返回的函数与外部handleChange函数形成一个闭包，它可以使用其封闭范围内的name变量，这就是上面带有currying的代码的工作方式

Answer 2

由事件处理程序调用的函数将被传递Event对象作为参数。想象一下，由浏览器实现的addEventListener方法看起来像这样：

something.addEventListener = (eventName, callback, useCapture) => {
  // Some code here
  // Bla bla bla
  const eventObj = {
    // Event object
  };
 callback(eventObj);
}

something.addEventListener('click', eventObject => {
  // Do something
}, false);

如您所见，如果使用普通函数，则变量name将包含Event对象，而不是实际名称。因此，通过使用咖喱函数，函数 RETURNED 将使Event对象向下传递，随时可以使用。

Answer 3

this.handleChange('name')在初始化时触发，返回一个函数并分配给onChange函数。

(event) => {
  this.setState({
    [name]: event.target.value
  })
}

现在，与

相同

<TextField
    ...
    value={name}
    onChange={this.handleEvent}
/>
//[name] now become yourName. It's `closure`
handleEvent = (event) => this.setState({yourName: event.target.value})

当您触发函数时，event代表TextField。

Answer 4

在react中，事件在这种情况下是传递给处理程序事件的综合事件实例。进一步了解here。这使您可以访问event.target属性上的值。在此示例中，此处理程序事件仅将name值与在文本字段上输入的值一起设置为状态。希望这可以解决！

反应处理程序-柯里化

4 个答案: