MUI中嵌套箭头函数handleChange的工作原理及事件传参解析

先看你遇到的核心代码：

const handleChange = (prop) => (event) => {
  setValues({ ...values, [prop]: event.target.value });
};

以及它的调用方式：

<EmailText
  label="Email"
  type={"email"}
  onChange={handleChange("email")}
/>

1. 函数本质：柯里化的高阶函数 #

这是函数柯里化的写法，说白了就是一个返回另一个函数的高阶函数。转成普通函数写法会更直观：

const handleChange = function(prop) {
  // 外层函数接收要更新的状态属性名（比如"email"）
  return function(event) {
    // 内层函数接收事件对象，执行状态更新逻辑
    setValues({ ...values, [prop]: event.target.value });
  };
};

2. 完整工作流程 #

• 渲染组件时，调用handleChange("email")，这一步不会直接执行状态更新，而是返回一个已经“记住”prop="email"的新函数。
• 这个新函数被赋值给onChange属性，成为输入框的事件回调。
• 用户输入内容触发onChange事件时，React会自动把合成事件对象event作为参数传给这个回调函数。
• 回调函数执行时，通过[prop]（计算属性名语法），把输入框的值event.target.value赋值给values对象中对应prop的属性，最后调用setValues更新状态。

3. onChange如何传递event参数 #

React的表单组件（包括MUI封装的组件）触发onChange事件时，会遵循标准事件回调规则，自动将事件对象event传递给绑定的回调函数。这里handleChange("email")返回的函数正好接收event参数，完美匹配要求，所以能正确拿到事件对象并处理。

这种写法的优势 #

可以复用同一个处理函数更新不同状态属性，比如用户名、密码输入框，只需分别调用handleChange("username")、handleChange("password")即可，不用为每个输入框写重复的事件处理函数。

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