Đếm ký tự
Thuộc phần Kiến thức cơ bản trong hành trình React của Coddy. Bài học 30 trên 42.
Vì văn bản là trạng thái (state), bạn có thể tính toán với nó ở mỗi lần kết xuất. Bộ đếm độ dài kiểu Tweet chỉ cần một dòng:
<p>{message.length} characters</p>Không cần thêm state: message.length được tính từ state hiện có và tự động tính lại sau mỗi lần nhấn phím. Quy tắc chung: nếu bạn có thể tính giá trị đó từ state hiện có, đừng lưu nó trong state.
Thử thách
DễTạo một ô tiểu sử có bộ đếm độ dài cập nhật trực tiếp.
- Đặt đầu vào (
id="bio") ở chế độ được kiểm soát bằng trạng tháibio(ban đầu để trống). - Đoạn văn (
id="length") hiển thịN characters, trong đó N là độ dài hiện tại của tiểu sử (tính toán, không lưu trữ).
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ự kiểm traBài học này có một bài trắc nghiệm ngắn. Bắt đầu bài học để trả lời và theo dõi tiến độ.
Tất cả bài học trong Kiến thức cơ bản
Kiểm tra số lượng trên văn bản bất kỳ: Công cụ đếm từ