Languages
[Edit]
PL

Prosty sposób korzystania z wielu przycisków opcji w Reakcie

0 points
Created by:
Admin Dirask Community
1270

Spora cz─Ö┼Ť─ç pocz─ůtkuj─ůcych programist├│w ma problem z u┼╝ywaniem wielu przycisk├│w opcji jednocze┼Ťnie, poniewa┼╝ nie zdaj─ů sobie sprawy, ┼╝e s─ů one zgrupowane i tylko jeden przycisk opcji mo┼╝na wybra─ç w jednej grupie.

Dzisiaj chcia┼ébym pokaza─ç, jak ┼éatwo u┼╝ywa─ç wielu przycisk├│w opcji bez grupowania wed┼éug┬áw┼éa┼Ťciwo┼Ťci┬áinput name w Reakcie. 😊

Efekt końcowy:

Wiele przycisk├│w opcji w ReactJS.
Wiele przycisk├│w opcji w ReactJS.

W poni┼╝szym przyk┼éadzie utworzy┼éem┬ákomponent funkcyjny RadioInput, kt├│ry renderuje┬álabel┬áza pomoc─ů pojedynczego┬áinput type="radio"┬á(przycisku radiowego).

W komponencie Form mamy cztery elementy RadioInput - dwa dla płci i dwa dla roli.

W ka┼╝dej grupie mo┼╝emy jednocze┼Ťnie zaznaczy─ç tylko jeden przycisk radiowy, nast─Öpnie┬áfunkcja setGender┬áustawia p┼ée─ç 🧒🧑, a setRole┬áprzypisuje rol─Ö w zale┼╝no┼Ťci od wybranej┬áopcji.┬á

Wykonalny przykład:

// ONLINE-RUNNER:browser;

// Uwaga: Odkomentuj wiersze z importami podczas pracy z kompilatorem JSX.
// import React from 'react';

const RadioInput = ({ label, value, checked, setter }) => {
  return (
    <label>
      <input
        type="radio"
        checked={checked == value}
        onChange={() => setter(value)}
      />
      <span>{label}</span>
    </label>
  );
};

const Form = (props) => {
  const [gender, setGender] = React.useState();
  const [role, setRole] = React.useState();
  const handleSubmit = (e) => {
    e.preventDefault();
    const data = { gender, role };
    const json = JSON.stringify(data, null, 4);
    console.clear();
    console.log(json);
  };
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Płeć:</label>
        <RadioInput
          label="M─Ö┼╝czyzna"
          value="m─Ö┼╝czyzna"
          checked={gender}
          setter={setGender}
        />
        <RadioInput
          label="Kobieta"
          value="kobieta"
          checked={gender}
          setter={setGender}
        />
      </div>
      <div>
        <label>Rola:</label>
        <RadioInput
          label="Administrator"
          value="administrator"
          checked={role}
          setter={setRole}
        />
        <RadioInput
          label="U┼╝ytkownik"
          value="u┼╝ytkownik"
          checked={role}
          setter={setRole}
        />
      </div>
      <button type="submit">Zatwierd┼║</button>
    </form>
  );
};

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

Je┼Ťli uwa┼╝asz┬áto rozwi─ůzanie za przydatne i chcia┼éby┼Ť otrzymywa─ç wi─Öcej takich tre┼Ťci, daj┬ázna─ç┬ázostawiaj─ůc reakcj─Ö.

Dzi─Öki┬áza po┼Ťwi─Öcony czas i do zobaczenia w kolejnych postach! 😊

Powi─ůzane posty

ReactJS - Artykuły

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