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;

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!