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
onChange={handleChange}
is equivalent with
onChange={(e) => handleChange(e)}
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.
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)}
You can write thing something like
onChange={(e) => handleChange(e, reale)}