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

Question

我创建了三个组件：

1. <MyInputComponent>扩展了material ui组件

2. <Input><MyInputComponent>通过接受作为 propsonInputTyping并将其传递给onChangeof来处理 onChange of<MyInputComponent>

3. <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);