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

Question

我创建了三个组件：<MyInputComponent>扩展了material ui组件<Input><MyInputComponent>通过接受作为 propsonInputTyping并将其传递给onChangeof来处理 onChange of<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我在第一个中传递了only Input，然后event将其传递给handleTyping。例子：<Input onInputTyping={(event) => handleTyping(event)} />但在第二个和第三个中，<Input>我不会将任何传递event给handleTyping. handleTyping那么，即使我没有event向它传递任何内容，怎么可能能够 console.log(event) 呢？

Answer 1

因为有一个全局事件变量。如果省略函数的参数，event将引用该参数（在第二个示例中）。巧合的是，React.ChangeEvent通过参数接收的 和持有 an 的全局变量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);