React implementiert den Beispielcode der Radiokomponente

Klasse Test erweitert Komponente {
  Konstruktor(Requisiten) {
    super(Requisiten)
    dieser.Zustand = {
      aktiv:1
    }
  }
  beiGruppenänderung(Wert) {
    dies.setState({
      aktiv: Wert
    })
  }
  rendern() {
    zurückkehren (
     <div>
      <RadioGroup beiÄnderung={diese.beiGroupÄnderung.bind(diese)} aktiv={diese.Zustand.aktiv}>
         <Radio value={1}>Mit Guthaben bezahlen</Radio>
         <Radio value={2}>WeChat Pay verwenden</Radio>
      </RadioGroup>
      <Schaltfläche bei Klick={()=>{
             console.log("Die aktuelle Auswahl ist: "+this.state.active)
           }}>Weiter</Button>
     </div>
      )
  }
}
Standardtest exportieren;

importiere React, {Komponente} von „react“;
Klasse RadioGroup erweitert Komponente {
  handleActiveChange(Wert) {
    console.log(`${value} ist ausgewählt`)
    this.props.onChange(Wert)
  }
  rendern() {
    zurückkehren (
      <div>
        {
          React.Children.map(diese.props.children, Kind => {
            let isActive = this.props.active === child.props.value ? true : false
            returniere React.cloneElement(Kind, {
              Bezeichnung: child.props.children,
              Wert: child.props.value,
              aktiv: istAktiv,
              beim Klicken: dies.handleActiveChange.bind(dies)
            })
          })
        }
      </div>
    )
  }
}
Standard-RadioGroup exportieren;

importiere React, {Komponente} von „react“;
importiere "./radio.scss"
Klasse Radio erweitert Komponente {
  rendern() {
    zurückkehren (
      <div className="radio-wrap" onClick={this.props.onClick.bind(this,this.props.value)}>
        <div Klassenname="links">
          <div className={`circle ${this.props.active === true ? 'aktiv' : ''} `}>
            <div Klassenname = "Gabel""></div>
          </div>
          <div className="label">{diese.props.label}</div>
        </div>
      </div>
    )
  }
}
Standardradio exportieren;

.radio-wrap {
  Höhe: 40px;
  Hintergrundfarbe: #ffffff;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Polsterung: 0px 30px;

  &:aktiv {
    Hintergrundfarbe: rgb(221, 221, 221);
  }

  .links {
    Anzeige: Inline-Block;

    .Kreis {
      Anzeige: Inline-Block;
      Höhe: 22px;
      Breite: 22px;
      Box-Größe: Rahmenbox;
      Rand: 1px durchgezogen #c5c9cd;
      Randradius: 50 %;
      Hintergrundfarbe: #ffffff;
      Position: relativ;

      
    }
    .aktiv{
      Hintergrundfarbe: #1eb94a;
      .Gabel {
        Höhe: 12px;
        Breite: 5px;
        Rahmen rechts: 1,5px durchgezogen #ffffff;
        Rahmen unten: 1,5px durchgezogen #ffffff;
        Position: absolut;
        oben: 40%;
        links: 50%;
        transformieren: verschieben (-50 %, -50 %) drehen (45 Grad);
      }
    }

    .Etikett {
      vertikale Ausrichtung: oben;
      Rand links: 10px;
      Anzeige: Inline-Block;
      Höhe: 22px;
      Zeilenhöhe: 22px;
      Schriftgröße: 14px;
    }
  }
}