javascript - React 句柄更改功能无需参数事件即可工作

Question

我创建了三个组件:

<MyInputComponent>扩展 Material ui组件

<Input>处理 <MyInputComponent> 的 onChange通过接受为 Prop onInputTyping并将其传递给 onChange的 <MyInputComponent>

<App>渲染 <Input>并传递给 onInputTyping的 <Input> handleTypying功能

代码: https://codesandbox.io/s/upbeat-bas-u0rj4
内 输入 我有:

const Input: React.FC<Props> = (props: Props) => {
  const { onInputTyping } = props;

  return (
    <MyInputComponent
      onChange={(event) => onInputTyping && onInputTyping(event)}
    />
  );
};

内 应用 我有:

export default function App() {
  const handleTyping = (event: React.ChangeEvent<HTMLInputElement>) => {
    console.log(event.target.value);
  };

  return (
    <div className="App">
      <Input onInputTyping={(event) => handleTyping(event)} />
      <br />
      <Input onInputTyping={() => handleTyping(event)} /> <-- This still console.log the event, but why?
      <br />
      <Input onInputTyping={handleTyping} /> <-- This still console.log the event, but why?
    </div>
  );

问题:
我不明白为什么最后两个 <Input>内 App能够 console.log 用户键入的事件。
我路过 event仅在第一个 Input ，还有这个 event然后传递给 handleTyping .示例: <Input onInputTyping={(event) => handleTyping(event)} /> 但是
在第二和第三 <Input>我没有通过任何 event至 handleTyping .所以， handleTyping怎么可能即使我没有通过任何 event 也可以使用 console.log(event)要吗？

Answer 1

因为有一个全局event多变的。如果省略函数的参数，event将引用(在您的第二个示例中)。巧合的是React.ChangeEvent这是通过参数和全局变量接收到的 HTMLEvent具有相同的属性，这就是它“有效”的原因。
您的第三个示例与您的第一个示例没有太大不同，我认为最好通过删除它周围的所有 React 并仅显示功能来说明:

 function realHandler(event) {
   //...
 }

 function callback(handler) {
    handler(event); // this is doing exactly the same thing as the following line
    realHandler(event); 
 }

 callback(realHandler);