React - przycisk opcji (radio button) - przykład

W tym artykule chcielibyśmy pokazać, jak korzystać przycisku opcji (radio button) w Reakcie.

Szybkie rozwiązanie:

const [gender, setGender] = useState();

// zmiana obsługi zdarzenia: 
const handleChange = e => {
   const target = e.target;
   if (target.checked) {
     setGender(target.value);
   }
};

// element przycisku opcji (tutaj dla wartości "mężczyzna"):
<label>
 <input type="radio" value="mężczyzna" checked={gender == 'mężczyzna'}
        onChange={handleChange} />
 <span>Mężczyzna</span>
</label>

Praktyczny przykład:

Poniższy przykład przedstawia komponent funkcyjny form z dwoma przyciskami opcji reprezentującymi płeć.

Dzięki useState jesteśmy w stanie przechowywać dane w komponentach state. W naszym przypadku jest to jedna z dwóch płci: mężczyzna lub kobieta. Gdy wystąpi zdarzenie onChange, nastąpi aktualizacja stanu komponentu przez setGender.

Wersja JSX:

// ONLINE-RUNNER:browser;

// Uwaga: Odkomentuj poniższe linijki podczas pracy z kompilatorem JSX:
// import React from react';
// import ReactDOM from 'react-dom';

const Form = props => {
  const [gender, setGender] = React.useState();
  const handleChange = e => {
    const target = e.target;
    if (target.checked) {
      setGender(target.value);
    }
  };
  const handleSubmit = e => {
    e.preventDefault();
    console.log(gender);
  };
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>
          <input type="radio" value="mężczyzna" checked={gender == 'mężczyzna'} 
                 onChange={handleChange} />
          <span>Mężczyzna</span>
        </label>
        <label>
          <input type="radio" value="kobieta" checked={gender == 'kobieta'} 
                 onChange={handleChange} />
          <span>Kobieta</span>
        </label>
      </div>
      <button type="submit">Zatwierdź</button>
    </form>
  );
};

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

Ważna uwaga:
Podczas tworzenia formularzy, React zaleca używanie niekontrolowanych komponentów,
ponieważ przy komponentach kontrolowanych duża liczba elementów wejściowych z obsługą zdarzeń onChange prowadzi do wielokrotnego renderowania strony, co znacząco zmniejsza wydajność.