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

【问题标题】：How to pass two parameters to custom event handler in React?如何将两个参数传递给 React 中的自定义事件处理程序？
【发布时间】：2022-01-13 02:47:05
【问题描述】：

我正在使用 Ant 设计，他们有一个名为 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}

我怎样才能将 real 事件处理程序传递给handleChange 来做一些stopPropagation 之类的事情

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

简单的codesandbox就明白我说的了。

【问题讨论】：

1.是的，它们是一样的。 2.你可以简单地写你所拥有的。这有什么问题吗？
@cjmling 嗯，我不知道如何将真实事件句柄传递给handleChange函数，该怎么做？
你不需要。你可以简单地做onChange={handleChange}，你应该有真正的变量作为事件处理程序。 codesandbox.io/s/tender-bird-5m11n?file=/src/App.js。你想传递不同的事件处理程序吗？如果是这样，那么像 Tanisq 那样做。

标签： javascript reactjs function antd

【解决方案1】：

你可以写类似的东西

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

【讨论】：

【解决方案2】：

会
onChange={handleChange}
等同于
onChange={(e) => handleChange(e)}

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

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

【讨论】：