Home/ Questions/Q 418
Next
In Process

DevzConnect Latest Questions

nicko
  • 0
  • 0
Beginner
Asked: 2025-02-20T01:49:02+00:00 In:

How do you handle events in React?

  • 0
  • 0

Explore event handling in React, like onClick, and how to use functions to manage user actions.

beginnerinterviewquestionsreactreactjs
Share
Leave an answer

Leave an answer

Browse

1 Answer

  1. Sarah Thompson
    Beginner

    ⚡ Handling Events in ReactJS

    Event handling in React is similar to handling events in plain JavaScript, but with some tweaks:

    • Use camelCase for event names (onClick instead of onclick).
    • Pass a function directly, not a string (onClick={handleClick}).

    1️⃣ Handling Click Events

    import React from 'react';

const ClickExample = () => {
const handleClick = () => {
alert('Button Clicked! 🚀');
};

return (
<button onClick={handleClick}>Click Me</button>
);
};

export default ClickExample;

    🛠️ Explanation:

    • onClick triggers handleClick when the button is clicked.

    2️⃣ Passing Arguments to Event Handlers

    const ArgumentExample = () => {
const greetUser = (name) => {
alert(`Hello, ${name}! 🎉`);
};

return (
<button onClick={() => greetUser('Naveen')}>Greet</button>
);
};

export default ArgumentExample;

    🛠️ Note:

    • Arrow function is used to pass arguments.
    • Without the arrow function, the function would execute immediately.

    3️⃣ Handling Form Events (onChange & onSubmit)

    import React, { useState } from 'react';

const FormExample = () => {
const [name, setName] = useState('');

const handleChange = (e) => {
setName(e.target.value);
};

const handleSubmit = (e) => {
e.preventDefault(); // Prevents page reload
alert(`Submitted: ${name}`);
};

return (
<form onSubmit={handleSubmit}>
<input type="text" value={name} onChange={handleChange} placeholder="Enter your name" />
<button type="submit">Submit</button>
</form>
);
};

export default FormExample;

    🛠️ Key Points:

    • onChange captures input updates.
    • onSubmit handles form submission.
    • e.preventDefault() stops page reload.

    4️⃣ Handling Keyboard Events (onKeyDown, onKeyUp)

    const KeyboardExample = () => {
const handleKeyDown = (e) => {
if (e.key === 'Enter') {
alert('Enter key pressed! ⌨️');
}
};

return <input type="text" onKeyDown={handleKeyDown} placeholder="Press Enter" />;
};

export default KeyboardExample;

    5️⃣ Handling Events in Class Components

    import React, { Component } from 'react';

class ClassEventExample extends Component {
handleClick = () => {
alert('Class Button Clicked! 🏆');
};

render() {
return <button onClick={this.handleClick}>Click Me (Class)</button>;
}
}

export default ClassEventExample;

    🛠️ Class Components:

    • Event handlers can be defined as class methods.
    • Use arrow functions to avoid manual binding or bind in the constructor.

    🚀 Pro Tips:

    • Debounce or throttle frequent events like onScroll or onResize.
    • For complex forms, use libraries like Formik or React Hook Form.
    • Use e.stopPropagation() if you need to prevent event bubbling.