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); 

Answer 1

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'}));