Đầu vào có kiểm soát

Ô nhập văn bản đặt ra một câu hỏi: người dùng nhập vào ô, nhưng thành phần của bạn có trạng thái: ai sở hữu văn bản? Trong React, câu trả lời là: state sở hữu văn bản. Đó gọi là ô nhập liệu được kiểm soát:

const [name, setName] = useState('');

<input
    value={name}
    onChange={(e) => setName(e.target.value)}
/>

Hai dây tạo thành vòng lặp:

• value={name}: hộp luôn hiển thị trạng thái
• onChange: mỗi lần nhấn phím, hàm thiết lập được gọi với e.target.value, tức văn bản hiện tại trong hộp

Vì vậy, khi bạn nhập, trạng thái được cập nhật, giao diện được hiển thị lại và ô nhập cho thấy trạng thái mới. Lợi ích là văn bản nằm trong một biến mà bạn có thể kiểm tra, biến đổi, xóa hoặc hiển thị ở bất kỳ đâu khác trên trang.