React में select के साथ काम करना

आइए अब ड्रॉप-डाउन सूचियों select पर काम करते हैं। उनके साथ काम करना इनपुट और चेकबॉक्स के साथ काम करने से व्यावहारिक रूप से अलग नहीं है।

मान लीजिए कि हमारे पास इस प्रकार का एक चयन है:

jsxfunction App() {
  return <div>
    <select>
      <option>text1</option>
      <option>text2</option>
      <option>text3</option>
      <option>text4</option>
    </select>
  </div>;
}

आइए इसे React के माध्यम से कार्यात्मक बनाएं:

jsxfunction 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>
      आपकी पसंद: {value}
    </p>
  </div>;
}