Reactはラジオコンポーネントのサンプルコードを実装します

クラス Test は Component を拡張します {
  コンストラクタ(props) {
    スーパー(小道具)
    この状態 = {
      アクティブ:1
    }
  }
  onGroupChange(値) {
    this.setState({
      アクティブ: 値
    })
  }
  与える（） {
    戻る （
     <div>
      <ラジオグループ onChange={this.onGroupChange.bind(this)} active={this.state.active}>
         <Radio value={1}>残高で支払う</Radio>
         <Radio value={2}>WeChat Pay を使用する</Radio>
      </ラジオグループ>
      <ボタンのクリック={()=>{
             console.log("現在の選択は: "+this.state.active)
           }}>次へ</ボタン>
     </div>
      ）
  }
}
デフォルトのテストをエクスポートします。

React をインポートします。{ コンポーネント } から 'react' をインポートします。
クラスRadioGroupはComponentを拡張します{
  handleActiveChange(値) {
    console.log(`${value}が選択されました`)
    this.props.onChange(値)
  }
  与える（） {
    戻る （
      <div>
        {
          React.Children.map(this.props.children, 子 => {
            isActive = this.props.active === child.props.value ? true : false とします
            React.cloneElement(child, { を返す
              ラベル: child.props.children,
              値: child.props.value、
              アクティブ: isActive、
              クリック時: this.handleActiveChange.bind(this)
            })
          })
        }
      </div>
    ）
  }
}
デフォルトの RadioGroup をエクスポートします。

React をインポートします。{ コンポーネント } から 'react' をインポートします。
「./radio.scss」をインポートします
クラスRadioはComponentを拡張します{
  与える（） {
    戻る （
      <div className="radio-wrap" onClick={this.props.onClick.bind(this,this.props.value)}>
        <div className="左">
          <div className={`circle ${this.props.active === true ? 'active' : ''} `}>
            <div className="フォーク"></div>
          </div>
          <div className="label">{this.props.label}</div>
        </div>
      </div>
    ）
  }
}
デフォルトのラジオをエクスポートします。

.radio-wrap {
  高さ: 40px;
  背景色: #ffffff;
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  パディング: 0px 30px;

  ＆：アクティブ {
    背景色: rgb(221, 221, 221);
  }

  。左 {
    表示: インラインブロック;

    。丸 {
      表示: インラインブロック;
      高さ: 22px;
      幅: 22px;
      ボックスのサイズ: 境界線ボックス;
      境界線: 1px 実線 #c5c9cd;
      境界線の半径: 50%;
      背景色: #ffffff;
      位置: 相対的;

      
    }
    。アクティブ{
      背景色: #1eb94a;
      .フォーク {
        高さ: 12px;
        幅: 5px;
        右境界線: 1.5px 実線 #ffffff;
        下境界線: 1.5px 実線 #ffffff;
        位置: 絶対;
        上位: 40%
        左: 50%;
        変換: 移動(-50%, -50%) 回転(45度);
      }
    }

    .ラベル {
      垂直方向の位置合わせ: 上;
      左マージン: 10px;
      表示: インラインブロック;
      高さ: 22px;
      行の高さ: 22px;
      フォントサイズ: 14px;
    }
  }
}