3

I face with some cases onClick or onSubmit functions needs both event and parameter. Can I do with this in react, or vanilla html tags?

Or, Just do something side effect using another functions?


const CustomFC = ({}) => {
  const [ id, setId] = useState("");
  const [password, setPassword] = useState("");
  
  type FormParams = {
    id: string;
    password: string; 
  }
  const customClickHandler = useCallback((params: FormParams) => 
  {
    dispatch(params); 
  }, [id, password]);

  const onChangeId = useCallback((id) => setId(id),[]);
  const onChangePassword = useCallback((password) => setPassword(password),[]);   
  
  <Form
     onClick ={customClickHandler}
     onChange={{onChangeId, onChangePassword}}
  />
}

// Form.tsx
const Form = ({
  onSubmit,
  onChange,
}) => {
  const { onChangeId, onChangePassword } = onChange; 
  const handleSubmit = ( e, params ) => { // <- can this be possible? 
    e.preventDefault();
    onSubmit(params);
  }
  return (
    <form onSubmit={handleSubmit}>
      <input ... />
      <input ... />
    </form>
  )
}
dante
  • 933
  • 4
  • 16
  • 39

2 Answers2

2

Yes you can do this:

const handleClick = (event, parameter) => {
   // do stuff
}

Then call it like this:

onClick={(event) => handleClick(event, parameter)}

Does that help?

In your case it would be:

  return (
    <form onSubmit={(event) => handleSubmit(event, parameter)}>
      <input ... />
      <input ... />
    </form>
  )
Grant Singleton
  • 1,611
  • 6
  • 17
  • How will a value be supplied for `parameter`? – Scott Marcus Jul 01 '20 at 16:49
  • 1
    This isn't really an extra parameter on the event listener--it's just calling a different function with an extra parameter. – Robert Moore Jul 01 '20 at 16:50
  • That value comes from your function. Try my code before you downvote please. This works. – Grant Singleton Jul 01 '20 at 16:50
  • Your code doesn't ever supply any value for `parameter`. You've only shown a function that expects two arguments, but it will only actually be passed one (`event`). And, the actual answer here is "No", but there is a workaround, not "Yes". – Scott Marcus Jul 01 '20 at 16:52
  • Like I said, try this before you downvote. I literally use this all the time and ```parameter``` is whatever you want to pass into the function that is in the scope of the component. Have you tried this? – Grant Singleton Jul 01 '20 at 16:54
  • I don't need to try it because I posted a working example of the same thing. The problem with your answer is that you said "Yes" when the answer is actually "No" and then you posted code that can't actually be "tried" because you didn't supply enough code for the OP to try it. That's why I say that your `parameter` isn't ever assigned a value - - because your answer didn't show it. – Scott Marcus Jul 01 '20 at 16:55
  • He asked for a solution for an onClick handler which takes two parameters. He did not specify the parameter and my answer is an onClick handler which takes event and a parameter (exactly what he asked). I also did it in React form and your solution is completely vanilla – Grant Singleton Jul 01 '20 at 16:57
  • 1
    @GrantSingleton I appreciate your answer. Let me try after give you upvote. If you keep using your approach in your program, I guess it fully worth of you just mentioned it here. – dante Jul 01 '20 at 17:05
2

Any native event handler will just have one event argument, but you can use the native handler to call a second function that has your custom parameters:

document.querySelector("button").addEventListener("click", function(event){
  actualHandler(event, this.id, this.dataset.test, this.className);
});

function actualHandler(event, id, dataTest, classList){
  console.log(event.type, id, dataTest, classList);
}
<button id="btn" data-test="foo" class="bar">Click Me</button>
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71