Đếm theo bước
Thuộc phần Kiến thức cơ bản trong hành trình React của Coddy. Bài học 24 trên 42.
Hàm setter nhận bất kỳ giá trị mới nào: bạn không bị giới hạn ở +1. Cộng thêm 5, nhân đôi, đặt lại về 0:
setPoints(points + 5);
setPoints(points * 2);
setPoints(0);Các nút với giá trị khác nhau chỉ là các trình xử lý (handler) khác nhau trên cùng một trạng thái (state):
<button onClick={() => setPoints(points + 5)}>+5</button>
<button onClick={() => setPoints(0)}>Reset</button>
Thử thách
DễMột trò chơi cộng 5 điểm cho mỗi đồng xu.
- Thêm trạng thái
pointsbắt đầu từ 0 và hiển thị trạng thái đó trong span cóid="points". - Nút
Collect coin(id="coin") cộng 5 điểm sau mỗi lần 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ự 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 độ.