Thuộc tính value trong select trong React

Bây giờ giả sử trong các thẻ option có các thuộc tính value:

function App() {
	return <div>
		<select>
			<option value="1">text1</option>
			<option value="2">text2</option>
			<option value="3">text3</option>
		</select>
	</div>;
}

Trong trường hợp như vậy, do có các thuộc tính value, giá trị của chúng sẽ được đưa vào state, chứ không phải là văn bản của các thẻ option. Có thể kiểm chứng điều này bằng cách xuất kết quả lựa chọn ra một đoạn văn:

function App() {
	const [value, setValue] = useState('');
	
	return <div>
		<select value={value} onChange={(event) => setValue(event.target.value)}>
			<option value="1">text1</option>
			<option value="2">text2</option>
			<option value="3">text3</option>
		</select>
		<p>
			lựa chọn của bạn: {value}
		</p>
	</div>;
}

Tách biệt văn bản của option và giá trị của nó có thể rất tiện lợi: văn bản của thẻ chúng ta có thể thay đổi tùy ý, trong khi đó trong script của chúng ta, kết quả lựa chọn sẽ được xử lý theo giá trị của thuộc tính value, giá trị này sẽ vẫn không thay đổi.

Xem ví dụ:

function App() {
	const [value, setValue] = useState('');
	
	return <div>
		<select value={value} onChange={event => setValue(event.target.value)}>
			<option value="1">text1</option>
			<option value="2">text2</option>
			<option value="3">text3</option>
		</select>
		<p>
			{value === '1' && 'bạn đã chọn mục đầu tiên'}
			{value === '2' && 'bạn đã chọn mục thứ hai'}
			{value === '3' && 'bạn đã chọn mục thứ ba'}
		</p>
	</div>;
}

Bây giờ, nếu chúng ta thay đổi văn bản của các thẻ option, thì hoạt động của script sẽ không bị ảnh hưởng - bởi vì nó được liên kết với giá trị của thuộc tính value.

Sử dụng danh sách thả xuống, đề nghị người dùng chọn nhóm tuổi mà họ thuộc về: từ 0 đến 12 tuổi, từ 13 đến 17, từ 18 đến 25, hoặc trên 25 tuổi.