How can I use e.preventDefault() in a function with more parameters?

Question

I'm working on a form in React and I need to use event.preventDefault. At the same time I also need to pass other parameters to the parent function. I tried adding them normally using the code below, but it doesn't seem to work; how can I do that? I already looked at other questions but had no luck finding a solution.

handleSubmit = (event, param1, param2) => {
    event.preventDefault();

    this.setState(prevState => {
        // piece of code where i need to use the other parameters    
   }); 
}

Well, how are you calling that function and passing the arguments? — Bergi, Mar 20 '19 at 19:36
I think you will find this [Q&A](https://stackoverflow.com/questions/32782922/what-do-multiple-arrow-functions-mean-in-javascript/32787782) useful — Mulan, Mar 20 '19 at 19:42
what do you mean by "doesn't seem to work"? In outline this should work fine, in order to debug it we need your actual code, and a description of what it does/doesn't do. — Robin Zigmond, Mar 20 '19 at 19:45

score 7 · Answer 1 · answered Mar 20 '19 at 19:38

7

Something like that?

<div onClick={(event)=> handleSubmit(event, param1, param2)}></div>

answered Mar 20 '19 at 19:38

AlexZvl

2,092
4
18
32

1

You can't pass around a synthetic event like this in React. – wlh Mar 20 '19 at 19:40
3

@wlh Yes you can. – Tholle Mar 20 '19 at 19:44
@Tholle not this way. You have to call `event.persist()` to be able to pass it around. https://reactjs.org/docs/events.html – wlh Mar 20 '19 at 19:47
@wlh It's perfectly fine, since the function will be invoked synchronously. You have to use `persist` if you want to use the event asynchronously, yes, but that's not the case here. – Tholle Mar 20 '19 at 19:52
@Tholle All I can say is that I have encountered problems using this very syntax. – wlh Mar 20 '19 at 19:58

wlh · Answer 2 · 2019-03-20T19:52:23.667

5

Read this article here on Synthetic Events and Event Pooling to understand why this doesn't work the way you expect: https://reactjs.org/docs/events.html

But, you can pass parameters to a function called by your event handler. For example:

handleClick(param1, param2){
   // no need to preventDefault here, you can't anyway, since you called it in onClick
   this.setState(prevState=> {
       // do something with param1 and param2
   })

render() {
    const param1 = "someVal";
    const param2 = 0;
    return <div onClick={e=> { e.preventDefault(); this.handleClick(param1,param2)} }/>
}

edited Mar 20 '19 at 19:52

answered Mar 20 '19 at 19:46

wlh

3,426
1
16
32

Thank you, I will check it out! What problems have you encountered with the method the other person suggested? – Isabella Mar 20 '19 at 20:15
Perhaps my usage was different, but it was very similar. I was trying to pass the event from the initial handler to another function within that function, but I have been unable to retrieve values from the event afterwards, particularly when using an `onChange` event and wanting to access `target` and `target.value`. – wlh Mar 20 '19 at 20:19

score 1 · Answer 3 · answered Mar 20 '19 at 20:56

To get the event and the adittional params, you need to use a closure.

const btn = document.querySelector('button');

function callback(name) {
   return function(e) {
     e.preventDefault();
     console.log(e.target.id);
     console.log(name);
     document.querySelector('#name').innerText = name;
   };
}

btn.addEventListener('click', callback('Paul'));

<form action="#">
  <div id="name"></div>
  <button id="test" type="submit">Submit</button>
</form>

How can I use e.preventDefault() in a function with more parameters?

3 Answers3