Nút xóa
Thuộc phần Kiến thức cơ bản trong hành trình React của Coddy. Bài học 31 trên 42.
Đây là sức mạnh đặc biệt của đầu vào được kiểm soát: vì state quản lý văn bản, code của bạn có thể thay đổi ô nhập, chứ không chỉ người dùng. Đặt lại nội dung từ bất cứ đâu:
<button onClick={() => setName('')}>Clear</button>Đặt state thành chuỗi rỗng, hộp nhập sẽ tự trống ở lần render tiếp theo vì value={name} luôn hiển thị state. Với input không được kiểm soát, bạn sẽ phải tự thao tác với DOM; còn với state, bạn chỉ cần gọi hàm setter một lần.
Thử thách
Trung bìnhHoàn thiện giao diện soạn tin nhắn.
- Kiểm soát ô nhập liệu (
id="message") bằng statemessage. - Hiển thị bản nháp trong đoạn văn (
id="draft"): văn bảnDraft:theo sau là tin nhắn. - Nút
id="clear"xóa nội dung tin nhắn.
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 độ.