Reactjs 为什么这个onChange函数可以工作？

我现在对onChange事件处理程序感到困惑。我只是想知道它是怎么工作的。 传统上，如果我们想跟踪输入框或文本区域内的值，我们会向函数传递一个变量

<InputDialogContent
  inputLabel="Email Address"
  inputType="email"
  onChange={(ev: React.ChangeEvent<HTMLTextAreaElement>): any =>
    onInputChange(ev.target.value)
  }
/>

它很好用。我知道

ev.target.value

变成

input

但我的一位高级工程师将代码更改为类似的内容，并且仍然在工作。 我想知道为什么它在没有像上面的函数那样传递变量的情况下还能工作

<InputDialogContent
  inputLabel="Email Address"
  inputType="email"
  onChange={onInputChange}
/>

函数变成这样。从我看到的函数仍然希望传递一个变量，但没有传递任何变量这个功能仍然有效为什么？

function onInputChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
  setEnableLoginButton(isValidEmail(e.target.value));
}

const isValidEmail = (email: string): boolean => {
  const validateFormat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  if (email.match(validateFormat)) {
    return true;
  } else {
    return false;
  }
};

函数onInputChange（e:React.ChangeEvent）{
setEnableLoginButton（isValidEmail（即target.value））；
}
const isValidEmail=（电子邮件：字符串）：布尔=>{
常量validateFormat=/^\w+（[\.-]？\w+*@\w+（[\.-]？\w+*）（\.\w{2,3}）+$/；
if（email.match（validateFormat））{
返回true；
}否则{
返回false；
}
};

我正在使用typescript及其函数组件。

函数1

（ev:React.ChangeEvent）：any=>onInputChange（ev.target.value）

具有类型

（ev:React.ChangeEvent）=>void

职能2

函数onInputChange（e:React.ChangeEvent）{
setEnableLoginButton（isValidEmail（即target.value））；
}

具有类型

（e:React.ChangeEvent）=>void

两个函数都有相同的签名（这意味着您以相同的方式调用两个函数），因此如果第一个函数可分配给

onChange

，那么第二个函数也可分配

---

从1到2，只有几个简化。第一个函数仅获取事件值并将其传递给

onInputChange

。这可以合并到一个函数中，如示例2中所示。

其中一个是内联定义的函数，另一个是通过引用传递的函数

您的

InputDialogContent

组件需要一个带有签名

（事件：React.ChangeEvent）：any

的

onChange

道具

在第一个示例中，您正在传递一个带有该签名的内联定义函数：

(ev: React.ChangeEvent<HTMLTextAreaElement>): any =>
  onInputChange(ev.target.value)
}

你也可以这样做：

<InputDialogContent
  onChange={e => setEnableLoginButton(isValidEmail(e.target.value))}
  ...
/>

setEnableLoginButton（isValidEmail（e.target.value））}
...
/>

参考-

function onInputChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
  setEnableLoginButton(isValidEmail(e.target.value));
}

(ev: React.ChangeEvent<HTMLTextAreaElement>): any =>
  onInputChange(ev.target.value)
}

function addNothingToX(x) {
  return x;
}

function addTenToX(x) {
  return x + 10;
}

// all these three are equivalent
console.log(addTenToX(0));
console.log(addNothingToX(addTenToX(0));
console.log(((x) => x)(addTenToX(0)); // this is what you are basically doing

<InputDialogContent
  onChange={e => setEnableLoginButton(isValidEmail(e.target.value))}
  ...
/>