trigger a keypress event onClick in react?

Question

In my component, i want to fire a fake onKeypress on a specific keycode, is it possible? i have this code:

class componentName extends Component {
 fireKey = e => {
    function makeKeyPressEvent(keyName, keyCode, charCode){
      var event = new KeyboardEvent('keypress');
      Object.defineProperties(event, {
          charCode: {value: charCode},
          keyCode: {value: keyCode},
          keyIdentifier: {value: keyName},
          which: {value: keyCode}
      });
      return event;
    }
    window.addEventListener('keypress', function(event){
      console.log('key pressed!',
        event.keyIdentifier, event.keyCode, event.charCode, event)
    }, true);
    var enterKeyEvent = makeKeyPressEvent('onClick', 39, 39);
    window.dispatchEvent(enterKeyEvent);
  }
  render (

        ) {
    return (
      <div>
        <button onClick={this.fireKey}> > </button>
      </div>
    )
  }
}

or how can i manually change an event keyCode on onClick of button in react?

i'm using it for a package feature, changes page on right arrow, wanted it on button also — gpbaculio
– gpbaculio, Commented Mar 16, 2018 at 17:34
well, i don't have any solution for simulating key event (sorry), but i might suggest to you a way to avoid it (well, and most probably it would make your code a little bit cleaner), the action that do all the logic, put inside a function, outside the key event, then inside your key event call that function that do the logic, and the onClick of the button? just the same, so you don't repeat yourself about the logic and didn't have to simulate key event. is it helping? — Tom Mendelson
– Tom Mendelson, Commented Mar 16, 2018 at 17:44
I'm failing to see the need for a keypress event to change a page. Could you explain your use case a little more thoroughly? — Kyle Richardson
– Kyle Richardson, Commented Mar 16, 2018 at 18:07

Pinki Gupta · Accepted Answer · 2018-03-17 08:24:22Z

1

you can use this:-
    class componentName extends Component {
     fireKey = e => {
        if(e.keyCode == 13){        //compare with your keyboard key
                //your code here
             }
      }
      render () {
        return (
          <div>
            <button onKeyPress={this.fireKey}> > </button>
          </div>
        )
      }
    }

answered Mar 17, 2018 at 8:24

Pinki Gupta

183 bronze badges

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

Collectives™ on Stack Overflow

trigger a keypress event onClick in react?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related