How to use

Group

function

in

RadioGroup

render() {
    const { filter, onChange } = this.props
    return (
      <Radio.Group defaultValue={filter} onChange={onChange}>
        <Radio value="all">All</Radio>
        <Radio value="active">Active</Radio>
        <Radio value="completed">Completed</Radio>
      </Radio.Group>
    );
  }

render() {
    const {getFieldDecorator, getFieldsError, getFieldError, isFieldTouched} = this.props.form;

    // Only show error after a field is touched.
    const usernameError = isFieldTouched('username') && getFieldError('username');
    const passwordError = isFieldTouched('password') && getFieldError('password');
    return (
      <Row>
        <Col span={8} offset={8}>
          <Form layout="vertical" onSubmit={this.handleSubmit}>
            <Radio.Group defaultValue="horizontal" onChange={this.handleFormLayoutChange}>
              <Radio.Button value={FORM_LOGIN}>Signin</Radio.Button>
              <Radio.Button value={FORM_REGISTER}>Register</Radio.Button>
            </Radio.Group>
            <br/><br/>
            {this.state.showLoginForm ? <LoginForm/> : <RegisterForm/>}
          </Form>
        </Col>
      </Row>
    );
  }

function RadioBox(props) {
 const [Value, setValue] = useState(0);

 const renderRadioBox = () =>
  props.list &&
  props.list.map((value) => (
   <Radio key={value._id} value={value._id}>
    {value.name}
   </Radio>
  ));

 const handleChange = (event) => {
  setValue(event.target.value);
  props.handleFilters(event.target.value);
 };

 return (
  <div>
   <Collapse defaultActiveKey={["0"]}>
    <Panel header="Price" key="1">
     <Radio.Group onChange={handleChange} value={Value}>
      {renderRadioBox()}
     </Radio.Group>
    </Panel>
   </Collapse>
  </div>
 );
}

return (
  <div>
    <Radio.Group value={size} onChange={this.handleSizeChange}>
      <Radio.Button value="large">Large</Radio.Button>
      <Radio.Button value="default">Default</Radio.Button>
      <Radio.Button value="small">Small</Radio.Button>
    </Radio.Group>
    <br /><br />
    <Button type="primary" size={size}>Primary</Button>
    <Button type="primary" icon="download" size={size}>Downloadfddd</Button>
    <br />
    <Button.Group size={size}>
      <Button type="primary">
        <Icon type="left" />Backward
        Forward<Icon type="right" />
      </Button>
    </Button.Group>
    <Icon type="step-backward" />
    <Icon type="chrome" />

function Component({ id, visible, data, onOK, onCancel, onChange }) {
 const handleChange = (e) => {
  console.log(e)
  onChange(e.target.value)
 }

 return (
  <Modal
   title="选择栏目类型"
   width={700}
   visible={visible}
   onOk={onOK}
   onCancel={onCancel}
  >
   <Radio.Group onChange={handleChange} value={id}>
    <Row gutter={16}>
     {data.map((value, index) =>
      <Col className={styles.card} span={6} key={index}>
       <img src={value.img_url} alt={value.value} />
       <Radio disabled={false} value={value.key}>{value.value}</Radio>
      </Col>)}
    </Row>
   </Radio.Group>
  </Modal>
 )
}

form.getFieldDecorator('formType', {
       initialValue: formType,
       rules: [{ required: true, message: '请选择直播类型!' }],
      })(
       <Radio.Group onChange={handleChangeFormType}>
        {formTypes.map((values, index) =>
         <Radio key={index}
          value={String(values.id)}
          disabled={!!(formId)}
         >{values.name}</Radio>)
        }
       </Radio.Group>
       )

  rules: [{required: true, message: '请选择是否完工!'}],
 })(
  <Radio.Group>
   <Radio value="1">是</Radio>
   <Radio value="2">否</Radio>
  </Radio.Group>
 )}
</Form.Item>

  <Radio.Group>
   <Radio value="a">item 1</Radio>
   <Radio value="b">item 2</Radio>
   <Radio value="c">item 3</Radio>
  </Radio.Group>
 </Form.Item>
</Form>

  rules: [{ required: true, message: '请选择' }],
 })(
  <Radio.Group>
   <Radio value={0}>隐藏</Radio>
   <Radio value={1}>显示</Radio>
  </Radio.Group>
 )}
</FormItem>

 )}
 <Radio.Group
  id={fields.theme.name}
  onChange={(e) =>
   </ThemeRadioWrapper>
  ))}
 </Radio.Group>
</Form.Item>

<div>
 <Row type="flex" justify="center">
  <Radio.Group value={size} onChange={this.handleSizeChange}>
   <Radio.Button value='large'>Large</Radio.Button>
   <Radio.Button value='default'>Default</Radio.Button>
   <Radio.Button value='small'>Small</Radio.Button>
  </Radio.Group>
 </Row>
 <br />
 <br />
 <Row type="flex" justify="center">
  <Button.Group size={size}>
   <Button type="primary">
    <Icon type="left"/>
    Next
   </Button>
  </Button.Group>
 </Row>
</div>

 initialValue: '2',
})(
 <Radio.Group>
  <Radio value="1">图形化形式</Radio>
  <Radio value="2">代码形式</Radio>
 </Radio.Group>
)}
<Table

 <div>
   <Switch checked={!loading} onChange={this.onChange} />
  <Radio.Group value={size} onChange={this.handleSizeChange}>
   <Radio.Button value="large">Large</Radio.Button>
   <Radio.Button value="default">Default</Radio.Button>
   <Radio.Button value="small">Small</Radio.Button>
  </Radio.Group>
  <br />
  <br />
  </Button>
  <br />
  <Button.Group size={size}>
   <Button type="primary">
    <Icon type="left" />
    <Icon type="right" />
   </Button>
  </Button.Group>
 </div>
);

function RadioBox(props) {
 const [Value, setValue] = useState(0);

 const renderRadioBox = () =>
  props.list &&
  props.list.map((value) => (
   <Radio key={value._id} value={value._id}>
    {value.name}
   </Radio>
  ));

 const handleChange = (event) => {
  setValue(event.target.value);
  props.handleFilters(event.target.value);
 };

 return (
  <div>
   <Collapse defaultActiveKey={["0"]}>
    <Panel header="Price" key="1">
     <Radio.Group onChange={handleChange} value={Value}>
      {renderRadioBox()}
     </Radio.Group>
    </Panel>
   </Collapse>
  </div>
 );
}

  <Radio.Group>
   <Radio value="a">item 1</Radio>
   <Radio value="b">item 2</Radio>
   <Radio value="c">item 3</Radio>
  </Radio.Group>
 </Form.Item>
</Form>