Home > Web Front-end > JS Tutorial > Event Handling in React

Event Handling in React

DDD
Release: 2024-09-28 18:16:30
Original
1140 people have browsed it

Event Handling in React

Event handling in React allows you to respond to user interactions like clicks, form submissions, and other events. Here’s a basic overview and example:

Basic Concepts

  1. Event Binding: In React, you typically use camelCase for event names (e.g., onClick, onChange).
  2. Event Handling: You can pass a function as an event handler directly in JSX.
  3. Synthetic Events: React wraps the native events in a synthetic event to ensure cross-browser compatibility.

Example

Here's a simple example of handling a button click and an input change:

import React, { useState } from 'react';

const EventHandlingExample = () => {
  const [inputValue, setInputValue] = useState('');

  const handleClick = () => {
    alert(`Button clicked! Input value: ${inputValue}`);
  };

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <input 
        type="text" 
        value={inputValue} 
        onChange={handleChange} 
        placeholder="Type something..." 
      />
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
};

export default EventHandlingExample;
Copy after login

Key Points

  • State Management: Use useState to manage the state in functional components.
  • Event Object: The event handler receives an event object that contains information about the event.
  • Prevent Default: Use event.preventDefault() to prevent the default behavior of events (like form submissions).

Feel free to ask if you need specific examples or further explanations!

The above is the detailed content of Event Handling in React. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template