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;
  }
};

我正在使用打字稿及其功能组件。

Answer 1

功能1

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

具有类型(ev: React.ChangeEvent<HTMLTextAreaElement>) => void

功能2

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

具有类型(e: React.ChangeEvent<HTMLTextAreaElement>) => void

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

从1到2，只有几个简化。第一个函数仅获取事件值，并将其向下传递到onInputChange。可以将其合并为一个函数，如示例2所示。

Answer 2

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

您的InputDialogContent组件需要具有签名onChange的{{1}}道具。

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

(event: React.ChangeEvent<HTMLTextAreaElement>): any

在第二个示例中，您将直接传递(ev: React.ChangeEvent<HTMLTextAreaElement>): any => onInputChange(ev.target.value) }函数。 onInputChange具有与onInputChange道具所需的签名相同（这就是您调用它的方式，该函数具有类型为onChange的单个参数）。

两者之所以相同，是因为您的内联定义函数只是在内部调用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

为什么此onChange函数起作用？

2 个答案:

功能1

功能2