Hiển thị lại đầ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 29 trên 42.

Khi văn bản đầu vào được lưu trong state, bạn chỉ cần dùng dấu ngoặc nhọn để hiển thị ở bất cứ đâu. Lời chào thay đổi theo nội dung trong ô khi bạn nhập:

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

<input value={name} onChange={(e) => setName(e.target.value)} />
<p>{name === '' ? 'Type your name' : 'Hello, ' + name + '!'}</p>

Toán tử ba ngôi xử lý ô trống bằng lời nhắc thân thiện thay vì câu Xin chào, ! gượng gạo. Kiểu kết hợp đầu vào và đầu ra trực tiếp này có mặt ở khắp nơi, từ ô tìm kiếm, biểu mẫu đăng ký đến trình chỉnh sửa.

Thử thách

Dễ

Tạo lời chào cập nhật trực tiếp.

Thêm trạng thái name bắt đầu bằng chuỗi rỗng và đặt đầu vào (id="name") ở chế độ được điều khiển: value + onChange.
Đoạn văn (id="echo") hiển thị Type your name khi ô trống và Hello, ...! cùng tên đã nhập nếu không. Ví dụ: nhập Ada → Hello, Ada!.

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>