React - lista rozwijana

W tym artykule chcielibyśmy pokazać, jak dodać listę rozwijaną w React.

W poniższym przykładzie za pomocą hooka React.useRef tworzymy referencję colorRef do listy rozwijanej, z której wybierzemy ulubiony kolor. W naszym przypadku do wyboru będzie kolor czerwony, żółty lub niebieski.

Obiekt data jest tworzony za pomocą referencji DOM, która znajduje się wewnątrz funkcji handleSubmit i odwołuje się do listy rozwijanej posiadającej właściwość colorRef.current.value.

Finalnie funkcja handleSubmit wyświetla w konsoli nasz obiekt data przekonwertowany na JSON .

// ONLINE-RUNNER:browser;

//import React from 'react';

const Form = () => {
  const colorRef = React.useRef();
  const handleSubmit = e => {
    e.preventDefault();
    const data = {
      color: colorRef.current.value
    };
    const json = JSON.stringify(data);
    console.clear();
    console.log(json);
  };
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>
          Wybierz swój ulubiony kolor:
          <select ref={colorRef}>
            <option value='red'>Czerwony</option>
            <option value='yellow'>Żółty</option>
            <option value='blue'>Niebieski</option>
          </select>
        </label>
      </div>
      <button type='submit'>Zatwierdź</button>
    </form>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<Form />, root );