RadioBox 单选框

例子

基本用法

export function App() {    const [valueA, setValueA] = useState(false);    const [valueB, setValueB] = useState(false);
    const onCheck: IRadioBoxComponentProps['onCheck'] = (sender) => {        const option = sender.GetText();        console.log(`${option} onCheck`);
        if (option === 'Option A' && !valueA) {            setValueA(!valueA);            setValueB(false);        } else if (option === 'Option B' && !valueB) {            setValueB(!valueB);            setValueA(false);        }    };
    return (        <Window>            <DemoLayout>                <RadioBox                    text="Option A"                    onCheck={onCheck}                    value={valueA}                ></RadioBox>                <RadioBox                    text="Option B"                    onCheck={onCheck}                    value={valueB}                ></RadioBox>            </DemoLayout>        </Window>    );}
interface IDemoLayoutProps {    children?: any[] | any;    width?: string;    height?: string;}
function DemoLayout(props: IDemoLayoutProps) {    const width = props?.width ?? '120dpx';    const height = props?.height ?? '32dpx';
    const demoLayout = {        columns: `1 ${width} ${width} 1`,        rows: `1 ${height} 1`,        areas: {            left: { row: 1, column: 1 },            right: { row: 1, column: 2 },        },    };    const [left, right] = props.children;    return (        <Grid style={{ layout: demoLayout }}>            <Grid style={{ area: demoLayout.areas.left }}>{left}</Grid>            <Grid style={{ area: demoLayout.areas.right }}>{right}</Grid>        </Grid>    );}

在这个例子中，我们演示了单选框的基本用法：在多个备选项中选择一个选项：

同时，控制台还有以下输出：

Option A onCheckOption B onCheckOption A onCheck

API

export interface IRadioBoxComponentProps extends IComponentProps {    text: string;    value?: boolean;    onCheck?: Parameters<IRadioBox['OnCheck']>[0];}