I am using Ant design and they have a component called Switch, Switch have a custom event handler

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>
  );
}

and I have so much of question about that kind of syntax

1. Does

onChange={handleChange}

is equivalent with

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

2. If for some reason, I can only write

onChange={handleChange}

how can I pass the real event handler to handleChange to do some stopPropagation, some thing likes

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

Simple codesandbox to understand what I said.

CodePudding user response：

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

They're equivalent if and only if the function receives one argument. But for ant design switches, the onChange actually passes in two parameters: the new value, and the event object. So if you want to create a new function and then call handleChange in that function, you'll probably want to pass both parameters through:

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

CodePudding user response：

You can write thing something like

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