How to use

Group

function

in

antd

const RemoveButtonGroup = ({ onRemoveClick, children, ...props }) => (
 <Button.Group style={{ marginRight: 8 }} {...props}>
  {children}
  <Button danger ghost onClick={onRemoveClick}>
   <CloseOutlined />
  </Button>
 </Button.Group>
)

render() {
    const {
      onAdd, onEdit, onDelete, onHistory,
      addEnable, editEnable, deleteEnable
      } = this.props
    return (
      <Button.Group>
        <Button onClick={onEdit} icon='edit'></Button>
        {/*<Button onClick={onDelete} icon='minus'></Button>*/}
        <Button onClick={onHistory} icon='info-circle-o'></Button>
      </Button.Group>
    )
  }

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>
       )

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>
    );
  }

render() {
  const { value } = this.props;

  return (
   <Row type="flex" align="middle">
    <Col span={2}>Toggle example:</Col>
    <Col span={3} offset={1}>
     <Switch checked={value} onChange={this.onChange} />
    </Col>
    <Col span={18}>
     <Button.Group>
      <Button disabled={value} onClick={this.onOpen} type="primary">
       ON
      </Button>
      <Button disabled={!value} onClick={this.onClose}>
       OFF
      </Button>
     </Button.Group>
    </Col>
   </Row>
  );
 }

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>
 )
}

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>
 );
}

const Home = (props) => {
 const [username, setUsername] = useState("");

 return (
  <Row
   justify="center"
   align="middle"
   type="flex"
   style={{ minHeight: "100vh", background: "#ddd" }}
  >
   <Col xs={12}>
    <Card>
     <Input.Group>
      <Input onChange={(e) => setUsername(e.target.value)} />
     </Input.Group>
     <Row type="flex" justify="center" style={{ marginTop: "2rem" }}>
      <Button onClick={() => navigate("/repo-list/" + username)}>
       Submit
      </Button>
     </Row>
    </Card>
   </Col>
  </Row>
 );
}

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() {
  return (
   <Row type="flex" align="middle">
    <Col span={2}>Progress Example:</Col>
    <Col span={5} offset={1}>
     <Progress type="circle" percent={this.props.pos} />
    </Col>

    <Col span={16}>
     <Button.Group>
      <Button
       icon={<PlusOutlined />}
       type="primary"
       onClick={this.onIncrease}
      >
       Increase
      </Button>
      <Button icon={<MinusOutlined />} onClick={this.onDecrease}>
       Decrease
      </Button>
      <Button type="danger" onClick={this.onReset}>
       Reset
      </Button>
     </Button.Group>
    </Col>
   </Row>
  );
 }

render() {
  const { cron, ...rest } = this.props;
  return (
   <>
    <Button.Group>
     {cron.running ? (
      <Button onClick={this.stopCron} type="danger">
       Auto refresh Stop
      </Button>
     ) : (
      <Button type="primary" onClick={this.startCron}>
       Auto refresh Start
      </Button>
     )}
     <Button onClick={this.resetCron}>Reset</Button>
    </Button.Group>
    <Table {...rest} />
   </>
  );
 }

template(css) {
    const {
      onAdd, onEdit, onDelete, onHistory,
      addEnable, editEnable, deleteEnable
      } = this.props
    return (
      <Button.Group>
        <Button onClick={onEdit} icon='edit'></Button>
        <Button onClick={onDelete} icon='minus'></Button>
        <Button onClick={onHistory} icon='info-circle-o'></Button>
      </Button.Group>
    )
  }

render() {
  const { cron, ...rest } = this.props;
  return (
   <>
    <Button.Group>
     {cron.running ? (
      <Button onClick={this.stopCron} type="danger">
       Auto refresh Stop
      </Button>
     ) : (
      <Button type="primary" onClick={this.startCron}>
       Auto refresh Start
      </Button>
     )}
     <Button onClick={this.resetCron}>Reset</Button>
    </Button.Group>
    <Table {...rest} />
   </>
  );
 }

render() {
  const { value } = this.props;

  return (
   <Row type="flex" align="middle">
    <Col span={2}>Toggle example:</Col>
    <Col span={3} offset={1}>
     <Switch checked={value} onChange={this.onChange} />
    </Col>
    <Col span={18}>
     <Button.Group>
      <Button disabled={value} onClick={this.onOpen} type="primary">
       ON
      </Button>
      <Button disabled={!value} onClick={this.onClose}>
       OFF
      </Button>
     </Button.Group>
    </Col>
   </Row>
  );
 }

render() {
  return (
   <Row type="flex" align="middle">
    <Col span={2}>Progress Example:</Col>
    <Col span={5} offset={1}>
     <Progress type="circle" percent={this.props.pos} />
    </Col>

    <Col span={16}>
     <Button.Group>
      <Button
       icon={<PlusOutlined />}
       type="primary"
       onClick={this.onIncrease}
      >
       Increase
      </Button>
      <Button icon={<MinusOutlined />} onClick={this.onDecrease}>
       Decrease
      </Button>
      <Button type="danger" onClick={this.onReset}>
       Reset
      </Button>
     </Button.Group>
    </Col>
   </Row>
  );
 }