Sifa value katika kichaguzi (select) kwenye React

Sasa hebu tuseme katika vitenzi option kuna sifa value:

jsxfunction App() {
  return <div>
    <select>
      <option value="1">maandishi1</option>
      <option value="2">maandishi2</option>
      <option value="3">maandishi3</option>
    </select>
  </div>;
}

Katika kesi kama hii, kwa sababu ya kuwapo kwa sifa value, thamani zitakazoingia kwenye hali (state) zitakuwa ni zile thamani za sifa, wala si maandishi ya vitenzi option. Tunaweza kuthibitisha hili kwa kuonyesha matokeo ya uchaguzi kwenye aya:

jsxfunction App() {
  const [value, setValue] = useState('');
  
  return <div>
    <select value={value} onChange={(event) => setValue(event.target.value)}>
      <option value="1">maandishi1</option>
      <option value="2">maandishi2</option>
      <option value="3">maandishi3</option>
    </select>
    <p>
      uchaguzi wako: {value}
    </p>
  </div>;
}

Kutenganisha maandishi ya option na thamani yake kunaweza kuwa rahisi: maandishi ya kiwango tunaweza kubadilisha jinsi tunavyotaka, wakati huo huo kwenye hati yetu (script) matokeo ya uchaguzi yatachukuliwa kulingana na thamani ya sifa value, ambayo itabaki isiyobadilika.

Angalia mfano:

jsxfunction App() {
  const [value, setValue] = useState('');
  
  return <div>
    <select value={value} onChange={event => setValue(event.target.value)}>
      <option value="1">maandishi1</option>
      <option value="2">maandishi2</option>
      <option value="3">maandishi3</option>
    </select>
    <p>
      {value === '1' && 'umechagua kipengee cha kwanza'}
      {value === '2' && 'umechagua kipengee cha pili'}
      {value === '3' && 'umechagua kipengee cha tatu'}
    </p>
  </div>;
}

Sasa, tukibadilisha maandishi ya vitenzi option, utendakazi wa hati hautaathirika - kwani imeshikamana na thamani ya sifa value.