Ôn tập: Biểu mẫu và đầu vào

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

Thử thách

Trung bình

Ôn tập chương. Xây dựng bộ chọn biệt danh với vòng lặp đầu vào được điều khiển đầy đủ: nhập, xem phản hồi trực tiếp, xóa.

Điều khiển ô nhập (id="nick") bằng trạng thái nick, ban đầu để trống.
Đoạn văn (id="meter") hiển thị N of 12, trong đó N là độ dài hiện tại của biệt danh (ví dụ: nhập Coddy → 5 of 12), giá trị này được tính ra chứ không lưu lại.
Nút id="clear" xóa biệt danh và nội dung trong ô nhập.

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