Adding params to function of onKeyPress

Question

I am having an onKeyPress Listener to my input component. Currently onKeyListener prints something when the enter key is hit.

This is current code

onKeyPress={this.onHitEnter.bind(this)}/>

onHitEnter = (e) => {
        if (e.key === 'Enter') {
          console.log()
    }

Now I want to send some addition params to onHitEnter method. I tried to do it but it didn't work

This is what I tried

onKeyPress={this.onHitEnter.bind(this, item, item.id, item.index)}/>

onHitEnter = (e, item, id, index) => {
        if (e.key === 'Enter') {
          console.log("enter")
            console.log(id)
    }

How can I send those additional parameters to onHitEnter method?

have a look [here](https://stackoverflow.com/questions/29810914/react-js-onclick-cant-pass-value-to-method) — Alexandre Miziara, Apr 17 '18 at 19:24

score 3 · Accepted Answer · answered Apr 17 '18 at 19:30

When you use bind with additional arguments it will put the additional arguments first and the event object last

function foo (a, b, event) {
   console.log(arguments) 
} 


document.querySelector("button").addEventListener("mousedown", foo.bind(this, "a", "b"))

<button>Foo</button>

so you would need to reorder your arguments

onHitEnter = (item, id, index, e)

score 1 · Answer 2 · answered Apr 17 '18 at 19:30

I would recommend binding your function elsewhere.

you could get the data you need by using this shorthand expression, since you're using es6:

onKeyPress={e => this.onHitEnter(e, item, item.id, item.index)}/>

the expression defines the arguments you want to pass during the event.

Adding params to function of onKeyPress

2 Answers2