Can we trigger KeyPress on Div Tag in react

Question

I have component where it displays questions . Each question is react component. On press of Enter it should navigate to next question. I have wired onKeyPress to Div element , but event gets captured sometimes , and sometimes it doesn't.

<div className="-" onKeyPress={(e) => this.navigateToNext(e)}>
    <div className="preview-head">
     //Other stuff here
    </div>{/* preview-container*/}
</div>

navigateToNext(e) { 
    if (option.get('selected') === true && e.charCode === 13) {
                this.goToNextQuestion();
    }
}

Can anyone tell me any other way to handle this problem.

spirift · Accepted Answer · 2017-03-17 11:09:24Z

3

I would wire up an event listener in componentWillMount for the keyup event and check it's the enter key. Just remember to remove the event listener in componentWillUnmount.

I would guess the issue is around the div having focus or not. If it is not focused the key press event doesn't fire on that element and thus nothing happens

answered Mar 17, 2017 at 11:09

spirift

3,0721 gold badge16 silver badges20 bronze badges

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

2 Comments

Lakshmi Over a year ago

Isn't it bad idea to use keyUp Listener ?

spirift Over a year ago

It depends which event you want to listen to. There is nothing wrong with listening for keyup.

c4k · Accepted Answer · 2018-04-07 13:00:04Z

0

As said by @spirift, your div has not the focus. Try this :

Add ref={(c) => { this.ref = c }} to your div and focus in a lifecycle method :

componentDidMount() {
    this.ref.focus();
}

answered Apr 7, 2018 at 13:00

c4k

4,6065 gold badges44 silver badges74 bronze badges

Collectives™ on Stack Overflow

Can we trigger KeyPress on Div Tag in react

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related