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

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

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

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

jsxfunction 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 ซึ่งจะยังคง ที่เดิมไม่เปลี่ยนแปลง

ดูตัวอย่าง:

jsxfunction 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