Một màn hình ghi chú cần nút đóng bàn phím để người dùng xem phần dưới. Nếu handler của nút vừa đóng bàn phím vừa xóa state, người dùng mất nội dung chưa lưu dù chưa yêu cầu bỏ bản nháp. Hãy xem bàn phím, focus và dữ liệu nhập là các phần có hợp đồng riêng.
Tạo một ví dụ không gửi dữ liệu
Tài liệu React Native 0.88 mô tả Keyboard.dismiss là thao tác đóng bàn phím đang hoạt động và bỏ focus. Trong ví dụ, value đến từ state. Nút đóng chỉ gọi API bàn phím, còn nút xóa thay đổi state riêng. Không có lưu vào bộ nhớ lâu dài, gọi API hay xác thực dữ liệu.
import React, {useState} from 'react';
import {Button, Keyboard, Text, TextInput, View} from 'react-native';
export default function NoteDemo() {
const [draft, setDraft] = useState('');
return (
<View style={{flex: 1, justifyContent: 'center', padding: 24}}>
<Text>Ghi chú thử nghiệm</Text>
<TextInput
accessibilityLabel="Nội dung ghi chú"
value={draft}
onChangeText={setDraft}
style={{borderWidth: 1, padding: 12, marginVertical: 12}}
/>
<Button title="Đóng bàn phím" onPress={() => Keyboard.dismiss()} />
<Button title="Xóa bản nháp" onPress={() => setDraft('')} />
<Text>Số đơn vị UTF-16: {draft.length}</Text>
</View>
);
}Nhãn đếm giúp quan sát state qua từng thao tác; length của chuỗi không phải số ký tự theo cách người dùng nhìn emoji hoặc dấu tổ hợp. Nếu ứng dụng có giới hạn nhập, hãy chọn đơn vị theo hợp đồng rồi kiểm tra riêng. Trong bài, chỉ cần biết nhãn đếm không về 0 khi đóng bàn phím.
Thử hành vi theo từng bước
Trên thiết bị đích, chạm ô nhập, nhập một câu rồi bấm Đóng bàn phím. Kiểm tra bàn phím ẩn, ô nhập bỏ focus và câu vẫn còn. Chạm lại ô nhập để tiếp tục. Sau đó bấm Xóa bản nháp và xác nhận dữ liệu mới biến mất. Nên kiểm tra cả iOS, Android và thiết bị có bàn phím phần cứng nếu sản phẩm hỗ trợ.
Nếu màn hình thật dùng onBlur để kiểm tra dữ liệu, thao tác bỏ focus có thể kích hoạt logic đó. Hãy review listener trước khi thêm nút; đừng để “đóng bàn phím” gián tiếp gửi request hoặc tự xóa lỗi người dùng cần đọc. Với nội dung dài, kiểm tra nút có còn chạm được khi keyboard chiếm không gian; ví dụ không xử lý layout màn hình nhỏ.
Lỗi thường gặp và giới hạn
Không coi dismiss là thao tác submit. Nếu người dùng cần lưu, đặt tên nút Lưu và định nghĩa bước validate, gửi và hiển thị lỗi riêng. State trong ví dụ chỉ tồn tại khi component còn được giữ; rời màn hình hoặc khởi động lại ứng dụng không nằm trong cam kết giữ bản nháp.
Bài được đối chiếu ngày 12/11/2026, chưa chạy Metro, Hermes, build native hoặc thử bàn phím trên máy thật. Các bước trên là kế hoạch kiểm tra, không phải kết quả quan sát.
Kết luận
Gọi Keyboard.dismiss khi cần đóng bàn phím và bỏ focus. Để giá trị nhập đi qua luồng state, lưu và xóa có chủ đích.
