แอตทริบิวต์ value ใน select ใน React

สมมติว่าตอนนี้ในแท็ก option มีแอตทริบิวต์ value:

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

ในกรณีเช่นนี้ เนื่องจากมีแอตทริบิวต์ value ค่าที่จะเข้าไปใน state จะเป็นค่าของแอตทริบิวต์เหล่านั้น ไม่ใช่ข้อความของแท็ก option สามารถยืนยัน ได้โดยแสดงผลลัพธ์การเลือกในย่อหน้า:

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}
		</p>
	</div>;
}

การแยกข้อความของ option และค่าของมัน อาจเป็นสิ่งที่สะดวก: ข้อความของแท็กเราสามารถเปลี่ยน ได้ตามต้องการ ในขณะที่ในสคริปต์ของเรา ผลลัพธ์การเลือกจะถูกประมวลผลตาม ค่าของแอตทริบิวต์ value ซึ่งจะยังคง ที่เดิมไม่เปลี่ยนแปลง

ดูตัวอย่าง:

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' && 'คุณเลือกข้อแรก'}
			{value === '2' && 'คุณเลือกข้อที่สอง'}
			{value === '3' && 'คุณเลือกข้อที่สาม'}
		</p>
	</div>;
}

ตอนนี้ ถ้าเราเปลี่ยนข้อความของแท็ก option การทำงานของสคริปต์จะไม่ผิดพลาด - เพราะมัน ผูกติดกับค่าของแอตทริบิวต์ value

ใช้ dropdown list ให้ผู้ใช้เลือก ว่าเขาอยู่ในกลุ่มอายุใด: ตั้งแต่ 0 ถึง 12 ปี, ตั้งแต่ 13 ถึง 17, ตั้งแต่ 18 ถึง 25, หรือมากกว่า 25 ปี