Arbeta med select i React

Låt oss nu ägna oss åt rullgardinsmenyer select. Arbetet med dem skiljer sig praktiskt taget inte från arbete med inp och checkboxes.

Låt oss säga att vi har en select så här:

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

Låt oss säkerställa dess 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>
      ditt val: {value}
    </p>
  </div>;
}