reactjs - 为什么这个 onChange 函数有效？

Question

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

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

在这种情况下，我们传入 ev.target.value功能是

function onInputChange(input: any) {
  if (isValidEmail(input)) {
    setEnableLoginButton(true);
  } else {
    setEnableLoginButton(false);
  }
}

它工作正常。我知道 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;
  }
};

我正在使用 typescript 及其功能组件。

Answer 1

其中一个是内联定义的函数，另一个是通过引用传递的函数。
您的 InputDialogContent组件期望 onChange带有签名的 Prop (event: React.ChangeEvent<HTMLTextAreaElement>): any .
在您的第一个示例中，您正在传递一个带有该签名的内联定义函数:

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

在您的第二个示例中，您正在传递 onInputChange直接发挥作用。 onInputChange具有与 onChange 要求的相同的签名prop(这就是您调用它的方式，一个带有 React.ChangeEvent<HTMLTextAreaElement> 类型的单个参数的函数)。
两者都这样做的原因是您的内联定义函数只是调用 onInputChange在里面传递相同的参数，所以本质上什么都不做。
你这样做:

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))}
  ...
/>