How to trigger keypress event in React.js

Question

I'm new to React.js. I'm trying to trigger keypress event for text div.

Here is text box code for which I want to execute keypress trigger.

<div id="test23" contenteditable="true" class="input" placeholder="type a message" data-reactid="137">Hii...</div>

and keypress method is:

onKeyPress: function(e) {
   return "Enter" == e.key ? "Enter key event triggered" : void 0)
}

I tried it with jQuery but I can't trigger it.

Here is my React code that I tried but its not working:

var event = new Event('keypress', {
 'keyCode' : 13,
 'which' : 13,
 'key' : 'Enter'
});
var node = document.getElementById('test23');
node.dispatchEvent(event);

Matt Huggins · Accepted Answer · 2020-03-22 16:06:56Z

4

If you create a reference to the div, then you can trigger an event on it. With hooks, you can use useRef. Without hooks, you can use createRef.

With hooks:

function MyComponent() {
  const ref = useRef();

  // This is simply an example that demonstrates
  // how you can dispatch an event on the element.
  useEffect(() => {
    ref.dispatchEvent(new KeyboardEvent('keypress', {
      key: 'Enter',
    }));
  }, []);

  return (
    <div
      ref={ref}
      id="test23"
      contentEditable={true}
      className="input"
      placeholder="type a message"
      data-reactid="137"
    />
  );
}

Without hooks:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.ref = React.createRef();
  }

  // This is simply an example that demonstrates
  // how you can dispatch an event on the element.
  triggerKeyPress() {
    this.ref.dispatchEvent(new KeyboardEvent('keypress', {
      key: 'Enter',
    }));
  }

  render() {
    return (
      <div
        ref={this.ref}
        id="test23"
        contentEditable={true}
        className="input"
        placeholder="type a message"
        data-reactid="137"
      />
    );
  }
}

el.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'}));

answered Mar 22, 2020 at 16:06

Matt Huggins

83.7k37 gold badges153 silver badges220 bronze badges

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

2 Comments

ron_g Over a year ago

'el' is not defined

Andrea D_ Over a year ago

ref does not have a method dispatchEvent

Vishnu · Accepted Answer · 2020-03-17 05:47:59Z

0

If you're trying to create a keyboard event, you can make use of KeyboradEvent constructor.

An enter key event can be dispatched like:

const event = new KeyboardEvent('keypress', {
  key: 'enter',
});
console.log(event) // KeyboardEvent {isTrusted: false, key: "enter", code: "", location: 0, ctrlKey: false, …}

FYI: The react-keydown package is good for implementing keyboard navigation or other shortcuts.

answered Mar 17, 2020 at 5:47

Vishnu

1,7311 gold badge17 silver badges28 bronze badges

Collectives™ on Stack Overflow

How to trigger keypress event in React.js

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related