Làm việc với select trong React
Bây giờ hãy cùng tìm hiểu về danh sách thả xuống
select.
Cách làm việc với chúng cũng gần như không khác
so với làm việc với input và checkbox.
Giả sử chúng ta có một select như thế này:
function App() {
return <div>
<select>
<option>text1</option>
<option>text2</option>
<option>text3</option>
<option>text4</option>
</select>
</div>;
}
Hãy đảm bảo nó hoạt động bằng các công cụ của React:
function App() {
const [value, setValue] = useState('');
function handleChange(event) {
setValue(event.target.value);
}
return <div>
<select value={value} onChange={handleChange}>
<option>text1</option>
<option>text2</option>
<option>text3</option>
<option>text4</option>
</select>
<p>
lựa chọn của bạn: {value}
</p>
</div>;
}
Tạo một danh sách thả xuống các thành phố. Đồng thời tạo một đoạn văn để hiển thị lựa chọn của người dùng.