No Proscribed Meaning

    @uiw/react-radio
    TypeScript icon, indicating that this package has built-in type declarations

    4.21.23 • Public • Published

    Radio 单选框

    Open in unpkg NPM Downloads npm version

    单选框,在一组备选项中进行单选。

    import { Radio, RadioButton, RadioGroup } from 'uiw';
    // or
    import { Radio, RadioButton, RadioGroup } from '@uiw/react-radio';

    基础用法

    适用广泛的基础最简单的用法,展示各种状态下的样式。

    import React from 'react';
    import { Radio, RadioButton } from 'uiw';
    
    export default function Demo() {
      return (
        <div>
          <Radio value="1">Radio</Radio>
          <Radio value="2" checked>选中</Radio>
          <Radio value="3" disabled>禁用</Radio>
          <Radio value="4" checked disabled>选中并禁用</Radio>
          <Radio value="4" checked disabled>选中并禁用</Radio>
          <RadioButton value="5" >RadioButton</RadioButton>
          <RadioButton value="5" checked >RadioButton 选中</RadioButton>
        </div>
      );
    }

    Form 中使用 Radio

    import React from 'react';
    import { Form, Radio, RadioGroup, RadioButton, Row, Col, Button, Notify } from 'uiw';
    
    export default function Demo() {
      return (
        <Form
          onChange={({ initial, current }) => {}}
          resetOnSubmit={false}
          onSubmitError={(error) => error && error.filed ? { ...error.filed } : null}
          onSubmit={({initial, current}) => {
            const ErrObj = {};
            if (current.radioGroup === 'unknown') {
              ErrObj.radioGroup = '请选择性别!';
            }
    
            if(Object.keys(ErrObj).length > 0) {
              const err = new Error();
              err.filed = ErrObj;
              throw err;
            }
    
            Notify.success({
              title: '提交成功!', description: `填写:【填写成功】!`
            });
          }}
          fields={{
            radioGroup: {
              value: 'girl',
              label: '请输入内容',
              help: '必须选择性别!',
              children: (
                <RadioGroup>
                  <Radio value="man"></Radio>
                  <Radio value="girl"></Radio>
                  <Radio value="shemale">中性</Radio>
                  <Radio value="unknown">未知</Radio>
                </RadioGroup>
              ),
            },
            radioButtonGroup: {
              value: 'girl',
              label: '请输入内容',
              help: '必须选择性别!',
              children: (
                <RadioGroup>
                  <RadioButton value="man"></RadioButton>
                  <RadioButton value="girl"></RadioButton>
                  <RadioButton value="shemale">中性</RadioButton>
                  <RadioButton value="unknown">未知</RadioButton>
                </RadioGroup>
              ),
            },
            radio: {
              help: '请选择!该选项为必选!',
              validator: (value) => !value ? '必填选项!' : null,
              children: <Radio value="man">已阅读</Radio>,
            },
          }}
        >
          {({ fields, state, canSubmit }) => {
            return (
              <div>
                <Row>
                  <Col>{fields.radioGroup}</Col>
                </Row>
                <Row>
                  <Col>{fields.radioButtonGroup}</Col>
                </Row>
                <Row>
                  <Col>{fields.radio}</Col>
                </Row>
                <Row>
                  <Col>
                    <Button disabled={!canSubmit()} type="primary" htmlType="submit">提交</Button>
                  </Col>
                </Row>
                <Row>
                  <Col>
                    <pre style={{ padding: 10, marginTop: 10 }}>
                      {JSON.stringify(state.current, null, 2)}
                    </pre>
                  </Col>
                </Row>
              </div>
            );
          }}
        </Form>
      );
    }

    单选

    适用广泛的基础最简单的用法。

    import React from 'react';
    import { Radio, RadioGroup, RadioButton } from 'uiw';
    
    class Demo extends React.Component {
      constructor(props) {
        super(props);
        this.state = { value: '未知' };
      }
      onChange(value) {
        this.setState({ value });
      }
      render() {
        return (
          <div>
            <RadioGroup name="sexs" value={this.state.value} onChange={(e)=>this.onChange(e.target.value)}>
              <Radio value="man"></Radio>
              <Radio value="girl"></Radio>
              <Radio value="shemale" disabled>中性</Radio>
              <Radio value="unknown" disabled>未知</Radio>
            </RadioGroup>
            <RadioGroup name="sexs" value={this.state.value} onChange={this.onChange.bind(this)} style={{ marginTop: 20 }}>
              <RadioButton value="man"></RadioButton>
              <RadioButton value="girl"></RadioButton>
              <RadioButton value="shemale" disabled>中性</RadioButton>
              <RadioButton value="unknown" disabled>未知</RadioButton>
            </RadioGroup>
          </div>
        )
      }
    }
    export default Demo;

    单选组

    设置单选初始值

    import React from 'react';
    import { Radio, RadioGroup, RadioButton, Divider, Button } from 'uiw';
    
    class Demo extends React.Component {
      constructor(props) {
        super(props);
        this.state = { value: '未知' };
      }
      onChange(value) {
        this.setState({ value });
      }
      render() {
        return (
          <div>
            <RadioGroup name="other" value={this.state.value} onChange={(e)=>this.onChange(e.target.value)}>
              <div>Group 1</div>
              <Radio value="男"></Radio>
              <Radio value="女"></Radio>
              <div>Group 2</div>
              <Radio value="中性" disabled>中性</Radio>
              <Radio value="未知">未知</Radio>
              <div>Group 3</div>
              <Radio value="E" style={{ display: 'block' }}>Item E</Radio>
              <Radio value="F" style={{ display: 'block' }}>Item F</Radio>
              <div>Group 3</div>
            </RadioGroup>
    
            <RadioGroup name="other" value={this.state.value} onChange={this.onChange.bind(this)} style={{ marginTop:20 }}>
              <RadioButton value="男"></RadioButton>
              <RadioButton value="女"></RadioButton>
              <RadioButton value="未知">未知</RadioButton>
            </RadioGroup>
            <Divider />
            <Button
              type="primary"
              onClick={() => {
                // console.log('set::', ['东北菜', '北京烤鸭']);
                this.setState({ value: '女' });
              }}
            >
              点击按钮选"女"
            </Button>
          </div>
        )
      }
    }
    export default Demo;

    Radio

    参数 说明 类型 默认值
    value 根据 value 进行比较,判断是否选中 String/Number/Boolean -
    name 用于表单对应的名称 String -
    checked Radio是否被选中 Boolean false
    disabled 是否禁用 Boolean false
    onChange 数值改变时的回调,返回当前值 Funtcion(e:Even) -

    RadioGroup

    参数 说明 类型 默认值
    value 根据 value 进行比较,判断是否选中 String/Number/Boolean -
    name 用于表单对应的名称 String -
    onChange 数值改变时的回调,返回当前值 Funtcion(e:Even) -

    Install

    npm i @uiw/react-radio

    DownloadsWeekly Downloads

    46

    Version

    4.21.23

    License

    MIT

    Unpacked Size

    81 kB

    Total Files

    48

    Last publish

    Collaborators

    • uiwjs
    • wcjiang