Languages
[Edit]
PL

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

3 points
Created by:
Walter
526

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

Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

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