Bài 4. Sự kiện và xử lý dữ liệu trong React

Bài trước chúng ta đã làm quen với props và state – giúp component truyền dữ liệu và quản lý nội bộ. Nhưng bạn có thấy không? Web không chỉ “hiển thị cho vui”, mà còn phải tương tác với người dùng – click nút, nhập liệu, gửi form, chọn checkbox…

Vì vậy, hôm nay ta sẽ học cách bắt sự kiện và xử lý dữ liệu trong React một cách trơn tru!

---

Khi web bắt đầu “nghe lời”

Bạn thử nghĩ xem: nếu một nút được bấm mà không làm gì cả, thì… vô dụng đúng không? 😅
React sinh ra không chỉ để hiển thị giao diện, mà còn để phản hồi lại các hành động của người dùng. Và chúng ta sẽ dùng:

• onClick: khi bấm nút
• onChange: khi người dùng gõ vào ô input
• onSubmit: khi form được gửi đi

Cùng bắt đầu xử lý sự kiện “kiểu React” nhé!

---

1. Bắt sự kiện onClick

React dùng cú pháp tương tự như HTML, nhưng là viết bằng camelCase (chữ thường + viết hoa giữa từ) và truyền hàm JavaScript.

📋 Copyfunction App() {
  const handleClick = () => {
    alert('Bạn đã bấm nút!');
  };

  return <button onClick={handleClick}>Bấm tôi!</button>;
}

Không có () sau handleClick, nếu không sẽ gọi ngay khi render.

---

2. Xử lý ô nhập liệu với useState và onChange

Ví dụ: Gõ tên và hiển thị lại

📋 Copyimport { useState } from 'react';

function InputDemo() {
  const [ten, setTen] = useState('');

  const handleChange = (e) => {
    setTen(e.target.value); // Lấy giá trị người dùng đang gõ
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Nhập tên bạn..."
        value={ten}
        onChange={handleChange}
      />
      <p>Xin chào, {ten}!</p>
    </div>
  );
}

Trong React, input luôn nên đi kèm với state để “kiểm soát” giá trị – gọi là controlled input.

---

3. Gửi form với onSubmit

Để xử lý khi người dùng nhấn “Gửi” form:

📋 Copyfunction ContactForm() {
  const [email, setEmail] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault(); // Ngăn reload
    alert(`Gửi email: ${email}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        placeholder="Nhập email..."
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button type="submit">Gửi</button>
    </form>
  );
}

Lưu ý: luôn e.preventDefault() để ngăn trình duyệt reload trang khi gửi form.

---

4. Checkbox và Radio Button

Checkbox

📋 Copyfunction CheckboxExample() {
  const [agree, setAgree] = useState(false);

  return (
    <div>
      <input
        type="checkbox"
        checked={agree}
        onChange={(e) => setAgree(e.target.checked)}
      />
      <label>Tôi đồng ý</label>
      {agree && <p>Cảm ơn bạn!</p>}
    </div>
  );
}

Radio

📋 Copyfunction GenderSelect() {
  const [gender, setGender] = useState('');

  return (
    <div>
      <label>
        <input
          type="radio"
          value="Nam"
          checked={gender === 'Nam'}
          onChange={(e) => setGender(e.target.value)}
        />
        Nam
      </label>
      <label>
        <input
          type="radio"
          value="Nữ"
          checked={gender === 'Nữ'}
          onChange={(e) => setGender(e.target.value)}
        />
        Nữ
      </label>
      <p>Giới tính: {gender}</p>
    </div>
  );
}

---

5. Gộp dữ liệu nhiều ô input

Thay vì tạo useState riêng cho từng input, bạn có thể gộp lại:

📋 Copyfunction FormGop() {
  const [form, setForm] = useState({ ten: '', email: '' });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setForm({ ...form, [name]: value });
  };

  return (
    <form>
      <input
        name="ten"
        value={form.ten}
        onChange={handleChange}
        placeholder="Tên"
      />
      <input
        name="email"
        value={form.email}
        onChange={handleChange}
        placeholder="Email"
      />
      <p>Xin chào, {form.ten}! Email của bạn là {form.email}</p>
    </form>
  );
}

---

6. Bài tập thực hành

1. Tạo component LoginForm:
   • 2 ô input: username, password
   • Nút “Đăng nhập”
   • Khi bấm, in ra username và password trong alert()
2. Tạo component LikeButton:
   • Hiện số lượt thích
   • Mỗi lần bấm tăng lên 1
3. Tạo component Bình chọn:
   • Có 3 lựa chọn: “Tốt”, “Bình thường”, “Không thích”
   • Khi chọn, hiển thị kết quả chọn ở dưới

Bonus:

• Dùng console.log() để debug dữ liệu khi nhập

---

7. Tổng kết

Trong bài này, bạn đã:

• Bắt sự kiện click, input, submit
• Dùng useState để điều khiển dữ liệu nhập
• Biết cách xử lý checkbox, radio
• Gộp nhiều ô input vào một state duy nhất

Từ đây, bạn có thể làm được các tính năng như:

• Form đăng ký
• Giao diện comment
• Hệ thống vote, bình chọn
• Toggle giao diện, bật/tắt chức năng

---

Kết bài – React không chỉ đẹp mà còn rất linh hoạt

Bây giờ bạn đã có đủ sức mạnh để:

• Tạo form
• Xử lý sự kiện
• Quản lý dữ liệu theo thời gian thực

Trong bài tiếp theo, mình sẽ hướng dẫn bạn cách sử dụng các hook nâng cao trong React: useState (sâu hơn), useEffect, và cách chạy code khi component render hoặc thay đổi dữ liệu.

Hẹn bạn ở Bài 5: useState & useEffect – Hook into sức mạnh thật sự của React