All files / src/radio/_example RadioExample.jsx

60% Statements 3/5
100% Branches 0/0
33.33% Functions 1/3
60% Lines 3/5

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36        1x 1x   1x                                                        
import React, { useState } from "react";
import { Radio } from "@tencent/tea-component/lib/radio";
 
export default function RadioExample() {
  const [gender, setGender] = useState(null);
  const [paymode, setPaymode] = useState(null);
 
  return (
    <>
      <section>
        <Radio.Group value={gender} onChange={value => setGender(value)}>
          <Radio name="male">男性</Radio>
          <Radio name="female">女性</Radio>
        </Radio.Group>
      </section>
 
      <hr />
      <section>如果选项超过三个,应该使用垂直分布来提高可读性:</section>
      <section>
        <Radio.Group
          value={paymode}
          onChange={value => setPaymode(value)}
          layout="column"
        >
          <Radio name="prepaid">预付费</Radio>
          <Radio name="billing">后付费</Radio>
          <Radio name="subscription">订阅模式</Radio>
          <Radio name="friend" disabled>
            朋友代付
          </Radio>
        </Radio.Group>
      </section>
    </>
  );
}