Radio

单选按钮。Radio UI 提供与WeLink规范一致的视图。

参数说明

效果示例

import React from 'react';
import {
  CellsTitle,
  CellBody,
  CellBodyExplan,
  CellFooter,
  Form,
  FormCell,
  Radio
} from '@wecode/react-weui';

export default class CheckBoxDemo extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedOption: '1'
    };
  }

  handleOptionChange(changeEvent) {
    console.log(changeEvent.target.value, 'radio value');
    this.setState({
      selectedOption: changeEvent.target.value
    });
  }

  render() {
    const { selectedOption } = this.state;
    return (
      <section>
        <CellsTitle>勾选框-单选</CellsTitle>
        <Form radio>
          <FormCell radio>
            <CellBody>主文体</CellBody>
            <CellFooter>
              次文本
              <Radio
                name="radio1"
                value="1"
                checked={selectedOption === '1'}
                onChange={this.handleOptionChange.bind(this)}
              />
            </CellFooter>
          </FormCell>
          <FormCell radio>
            <CellBody>主文体</CellBody>
            <CellFooter>
              次文本
              <Radio
                name="radio1"
                value="2"
                checked={selectedOption === '2'}
                onChange={this.handleOptionChange.bind(this)}
              />
            </CellFooter>
          </FormCell>
        </Form>
        <Form radio>
          <FormCell radio>
            <CellBody>
              主文体
              <CellBodyExplan>此处是辅助说明文体，说明文本</CellBodyExplan>
            </CellBody>
            <CellFooter>
              <Radio name="radio2" value="1" defaultChecked />
            </CellFooter>
          </FormCell>
          <FormCell radio>
            <CellBody>
              主文体
              <CellBodyExplan>此处是辅助说明文体，说明文本</CellBodyExplan>
            </CellBody>
            <CellFooter>
              <Radio name="radio2" value="2" />
            </CellFooter>
          </FormCell>
        </Form>
      </section>
    );
  }
}