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

Question

我创建了三个组件:

1. <MyInputComponent>扩展 Material ui 组件
2. <Input>处理 <MyInputComponent> 的 onChange通过接受作为 Prop onInputTyping并将其传递给onChange的<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仅在第一个 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);