Q1. How is event handling different in React compared to plain HTML?
In React, events are named using camelCase (onClick instead of onclick), and you pass a function as the event handler (not a string).
React also uses a synthetic event system to ensure cross-browser compatibility.
React also uses a synthetic event system to ensure cross-browser compatibility.
Q2. How do you handle a click event in a functional component?
Define a function inside the component and attach it to the onClick attribute.
Example:
Example:
function handleClick() { alert('Clicked'); }
return <button onClick={handleClick}>Click</button>;
onClick={() => alert('Clicked')}.Q3. How do you pass arguments to event handlers?
You can use an arrow function:
Or use the bind method:
Arrow functions are more common because they are concise and avoid 'this' binding issues.
onClick={() => handleClick(id)}.Or use the bind method:
onClick={handleClick.bind(this, id)}.Arrow functions are more common because they are concise and avoid 'this' binding issues.
Q4. What is the event object in React?
The event object is a synthetic event wrapper that has the same properties as native events but works consistently across browsers.
It is passed to the event handler automatically.
For example,
It is passed to the event handler automatically.
For example,
onClick={(e) => console.log(e.target)}.Q5. How do you prevent default behavior in React?
Call
In React, returning false does not prevent default; you must explicitly call preventDefault.
Example:
e.preventDefault() on the event object.In React, returning false does not prevent default; you must explicitly call preventDefault.
Example:
function handleSubmit(e) { e.preventDefault(); }