Arbeid med select i React

La oss nå ta for oss rullegardinlister select. Arbeid med dem skiller seg praktisk talt ikke fra arbeid med inputs og avmerkingsbokser.

La oss si at vi har en slik select:

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

La oss sikre dens funksjon ved hjelp av 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>
      ditt valg: {value}
    </p>
  </div>;
}