03-Basic Event Handling and Form in ReactJS with Video in Khmer

Hello my friends! Today let me show you step by step how Event Handling and Forms work in ReactJS! Events make our website interactive when users click buttons, type text in inputs, or submit forms. Very easy explanation with code examples and video demo in Khmer!

1. What is an Event in ReactJS?

An Event is an action triggered by user interaction — like clicking a button (onClick), changing input text (onChange), or submitting a form (onSubmit). Check out the React Official Responding to Events Documentation. Before building forms, make sure you understand 02 - Functional Components and Props!

3 Golden Rules for React Events:

1. camelCase Naming: Event names are written in camelCase (e.g. onClick instead of onclick, onChange instead of onchange).
2. Pass Function Reference: In JSX, pass the function handler inside curly braces {handleClick}, DO NOT invoke it {handleClick()} directly!
3. Prevent Default Behavior: In HTML forms, submit reloads the page. In React, we use e.preventDefault() to handle data smoothly without page refresh!

2. Basic Event Handling Example (Button Click)

Here is a simple example showing how to handle a button click in ReactJS:

import React from 'react';

function ClickExample() {
  // Event handler function
  const handleClick = () => {
    alert("Button clicked! Hello my friend!");
  };

  const handleGreeting = (name) => {
    alert(`Hello ${name}!`);
  };

  return (
    <div>
      {/* Direct function reference */}
      <button onClick={handleClick}>Click Me</button>

      {/* Passing parameters using arrow function */}
      <button onClick={() => handleGreeting("Sok Dara")}>Greet Dara</button>
    </div>
  );
}

export default ClickExample;

💡 Tip: Always pass a function reference {handleClick} or arrow function {() => handleClick(id)}. If you write onClick={handleClick()}, the function will execute IMMEDIATELY when component renders, not when user clicks!

Watch Video: Basic Events Handling in ReactJS with Code Examples (Khmer)

3. Event Handling with Form (Controlled Component)

In React, forms are usually Controlled Components, meaning input value is stored inside React State and updated whenever onChange event fires.

import React, { useState } from 'react';

function UserForm() {
  const [name, setName] = useState("");

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

  return (
    <form onSubmit={handleSubmit}>
      <label>Enter Your Name: </label>
      <input 
        type="text" 
        value={name} 
        onChange={(e) => setName(e.target.value)} 
        placeholder="Type here..."
      />
      <button type="submit">Submit Form</button>
    </form>
  );
}

export default UserForm;

💡 Tip: ALWAYS call e.preventDefault() inside your onSubmit handler! HTML default behavior reloads the web page on form submit, which causes React state to reset to empty! For detailed state handling, see 05 - ReactJS State Management (useState).

💡 Tip: Use e.target.value inside onChange handler to read real-time text entered by user inside <input /> field! Read more on React Input Component Docs.

Watch Video: Event Handling with Form in ReactJS (Khmer)

💡 Next Lesson: Continue to 04 - ReactJS Fragment to learn how to keep your DOM tree clean!

---

Hope this tutorial helps you understand React Events and Forms easily! Practice writing onChange and onClick handlers in your own project. Happy coding my friends! Sharing is caring!