React事件处理的嵌套函数如何获取event事件对象？

1. 嵌套函数获取e对象的原理&和词法环境的关系 #

首先你要理清两段逻辑的执行时机：

• 渲染阶段执行this.handleClick2('item')时，你确实只传入了input参数，此时handleClick2会返回内层的(e) => { ... }匿名函数，这个返回值会被直接绑定给按钮的onClick属性作为事件回调。
• 当按钮触发点击事件时，React会自动把合成事件对象e作为入参，调用你刚才绑定给onClick的内层函数，所以e是事件触发时由React主动传入的，属于内层函数自身的形参，本身就在内层函数的作用域范围内。

你提到的*Lexical Environment（词法环境）*确实和这段代码的运行有关，但作用是保证内层函数可以访问到外层的input参数：内层函数在handleClick2调用时创建，会保留当前词法环境的引用，即使handleClick2执行完成退出执行栈，内层函数作为闭包依然可以访问到当时传入的input值。

// 你写的代码等价于以下逻辑，更容易理解
render() {
  // 渲染时先调用handleClick2拿到事件回调，input被保存在闭包里
  const clickCallback = this.handleClick2('item') 
  return (
    // 点击时React调用clickCallback，传入e
    <button onClick={(e) => clickCallback(e)}>
      Confirm
    </button>
  );
}

2. 从handleClick1中给handleClick2传修改后参数的实现 #

因为handleClick2是柯里化函数，你只需要在修改完input和e之后，按顺序传入两层参数调用即可：

handleClick2 = (input) => (e) => {
  this.setState({
    [input]: e.target.value
  });
};

handleClick1 = input => e => {
  // 自定义修改input的逻辑
  const mutatedInput = `custom_${input}`
  // 自定义修改e的逻辑，注意如果要异步操作合成事件需要先调用e.persist()
  const mutatedE = {
    ...e,
    target: {
      ...e.target,
      value: e.target.value.trim() // 示例：给输入值去空格
    }
  }
  // 按顺序传入修改后的参数调用handleClick2即可
  return this.handleClick2(mutatedInput)(mutatedE)
}

render() {
  return (
    <button onClick={this.handleClick1('item')}>
      Confirm
    </button>
  );
}

内容的提问来源于stack exchange，提问作者kollegah