Ôn tập: Trạng thái và sự kiện

Thuộc phần Kiến thức cơ bản trong hành trình React của Coddy. Bài học 27 trên 42.

Thử thách

Trung bình

Tóm tắt chương. Tạo bảng điều khiển đèn bàn: một bộ đếm và một công tắc nằm cạnh nhau trong cùng một component.

Thêm hai state độc lập: brightness bắt đầu từ 0 và on bắt đầu từ false.
Hiển thị độ sáng trong span có id="level". Nút id="brighter" tăng thêm 1 sau mỗi lần nhấp.
Nút id="power" đảo trạng thái của on. Khi bật, hiển thị một <p> có id="status" và nội dung Lamp is on; nếu không, hiển thị null.

Tự làm thử

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>

Tất cả bài học trong Kiến thức cơ bản

1Làm quen với React

React là gì?Component đầu tiên của bạn Quy tắc một phần tử cha JSX không phải HTML Ôn tập: Làm quen với React

4Props

Props là gì?Truyền props Hai props Cùng một component, dữ liệu mới Prop children Ôn tập: props

7Điều kiện và danh sách

Hiển thị bằng toán tử ba ngôi Hiển thị với &&Hiển thị danh sách Khóa rất quan trọng Lọc rồi ánh xạ Ôn tập: Điều kiện và danh sách

2Biểu thức JSX

Dấu ngoặc nhọn Phép toán trong dấu ngoặc nhọn Dấu ngoặc nhọn trong thuộc tính Gọi hàm trong JSX Ôn tập: Biểu thức JSX

5Trạng thái và sự kiện

Trạng thái là gì?Bộ đếm lượt nhấp Đếm theo bước Bật tắt bằng trạng thái Trạng thái độc lậpÔn tập: Trạng thái và sự kiện

8Dự án: Thẻ hồ sơ

Bước 1: Cấu trúc thẻ Bước 2: Thẻ với props Bước 3: Nút thích Bước 4: Bật/tắt theo dõi

3Thành phần

Các khối cấu thành Thành phần thứ hai Tái sử dụng thành phần Tạo một trang Ôn tập: thành phần

6Biểu mẫu và đầu vào

Đầu vào có kiểm soát Hiển thị lại đầu vào Đếm ký tự Nút xóa Ôn tập: Biểu mẫu và đầu vào