Arbejde med select i React

Lad os nu tage os af rullemenuerne select. Arbejdet med dem adskiller sig stort set ikke fra arbejdet med inputfelter og afkrydsningsfelter.

Lad os sige, at vi har en select som denne:

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

Lad os sikre dens funktion med 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>
      dit valg: {value}
    </p>
  </div>;
}