Languages
[Edit]
PL

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

3 points
Created by:
Dirask JS Member
3640

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┼Ť─ç.

ReactJS (PL)

React - przycisk opcji (radio button)
Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join