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

Question

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

Does

onChange={handleChange}

is equivalent with

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

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.

1. Yes they are same. 2. You can simply write as what you have. Is there any issue with that? — cjmling
– cjmling, Commented Dec 8, 2021 at 5:06
@cjmling uhm, i don't know how to pass real event handle to handleChange function, how to do it? — sonphung.xf
– sonphung.xf, Commented Dec 8, 2021 at 5:12
You don't need to. You can simply do onChange={handleChange}, You should have reale variable as event handler. codesandbox.io/s/tender-bird-5m11n?file=/src/App.js. Do you want to pass different event handler? If so, then do as Tanisq. — cjmling
– cjmling, Commented Dec 8, 2021 at 5:19

Nicholas Tower · Accepted Answer · 2021-12-08 05:23:45Z

1

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

answered Dec 8, 2021 at 5:23

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tanishq Vyas · Accepted Answer · 2021-12-08 05:14:32Z

0

You can write thing something like

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

answered Dec 8, 2021 at 5:14

Tanishq Vyas

1,7091 gold badge19 silver badges30 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related