如何将两个参数传递给 React 中的自定义事件处理程序？

Question

我正在使用 Ant design，他们有一个名为 Switch 的组件，Switch 有一个自定义事件处理程序

import "./styles.css";
import "antd/dist/antd.css";
import { Switch } from "antd";
import { useState } from "react";

export default function App() {
  const [status, setStatus] = useState(true);
  const handleChange = (e) => {
    // e is a boolean variable, true or false
    console.log(e);
    setStatus(e);
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Switch checked={status} onChange={handleChange}></Switch>
    </div>
  );
}

我对这种语法有很多疑问

有

onChange={handleChange}

等同于

onChange={(e) => handleChange(e)}

如果因为某些原因，我只能写

onChange={handleChange}

我怎样才能将 真实的 事件处理程序传递给 handleChange 来做一些事情 stopPropagation，比如

const handleChange = (e, reale) => {
    reale.stopPropagation()
    setStatus(e);
  };

简单codesandbox看懂我说的

Answer 1

你可以这样写

onChange={(e) => handleChange(e, reale)}

Answer 2

Does
onChange={handleChange}
is equivalent with
onChange={(e) => handleChange(e)}

当且仅当函数接收一个参数时它们是等价的。但是对于ant design switch，onChange其实传入了两个参数：new value，和event object。因此，如果您想创建一个新函数，然后在该函数中调用 handleChange，您可能希望通过以下方式传递两个参数：

onChange={(value, e) => handleChange(value, e)}

如何将两个参数传递给 React 中的自定义事件处理程序？

How to pass two parameters to custom event handler in React?

javascript

function

reactjs

antd