Werk met select in React

Laat ons nou aandag gee aan uitklaplyste select. Om daarmee te werk verskil feitlik nie van om met insette en merkblokkies te werk nie.

Kom ons sê ons het so 'n select:

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

Laat ons die werking daarvan deur React verseker:

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>
      u keuse: {value}
    </p>
  </div>;
}