React Events

Seeing the topic. Someone will ask if the normal event is different from React Events. Yes, there are some differences. Let's look at them.

• React events are named using camelCase, rather than lowercase.
• React passes a function as the event handler, rather than a string. So you will use curly braces {}

  In HTML, you use lowercase and string
  <button onclick= "gohome()">
  </button>
  

In React, you ue camelCase and curly braces
<button onClick={gohome}>
</button>

• You can not return false to prevent default behavior in React. e.g. You cannot use return false to stop the link from opening another page.

In HTML
<a href="#" onclick="console.log('The link was clicked.'); return false">
  Click me
</a>

In React, use e.preventDefault
function ActionLink() {
  function handleClick(e) {    
      e.preventDefault();    
      console.log('The link was clicked.');  }
  return (
    <a href="#" onClick={handleClick}>      Click me
    </a>
  );
}

Now Here are some Event Lists. Remember, you will use camelCase

onClick 
onContextMenu 
onDoubleClick 
onDrag 
onDragEnd 
onDragEnter 
onDragExit
onDragLeave 
onDragOver 
onDragStart 
onDrop 
onMouseDown 
onMouseEnter 
onMouseLeave
onMouseMove 
onMouseOut 
onMouseOver 
onMouseUp

If you find this helpful, leave a comment, reaction and share. Thanks