I don't seem to fully understand how "closing" works. I have an input when changing which I need to call functions and pass 2 arguments to it. But I also need the event of this event.
My version below doesn't work. Only the first part of the function will work, and the second (where I return the second function) does not work. I can not, unfortunately, understand what is my mistake and how to make the "closure" to the end.
And the second, mini, question - how exactly to type event here if I'm working in react?
const handleChangeClosure = (userId: string, role: string) => (event: ???) => {
const { checked } = event.target;
dispatch(addOrDeleteRoleAction(userId, role, checked, dispatch));
};
<input type="checkbox" onChange={() => handleChangeClosure(user.userId, "Controller")}/>
CodePudding user response:
Replace
<input type="checkbox" onChange={() => handleChangeClosure(user.userId, "Controller")}/>
With
<input type="checkbox" onChange={handleChangeClosure(user.userId, "Controller")}/>
The handleChangeClosure
function returns a function and the onChange
event expects a function. So you don't need ()=>
which would just wrap it in another function.
Alternatively, this would also work:
<input type="checkbox" onChange={(ev) => handleChangeClosure(user.userId, "Controller")(ev)}/>
But that's just more useless code.
CodePudding user response:
By using onChange={() => ...}
, you're losing the event
argument.
What you want is
<input type="checkbox" onChange={handleChangeClosure(user.userId, "Controller")}/>
Your higher-order-function returns a new event handler function that will be attached to the change event.
FYI the type for event
is React.ChangeEvent<HTMLInputElement>
const handleChangeClosure =
(userId: string, role: string) =>
(event: React.ChangeEvent<HTMLInputElement>) => {
const { checked } = event.target;
dispatch(addOrDeleteRoleAction(userId, role, checked, dispatch));
};