云社区 博客 博客详情
云社区 博客 博客详情

Welink React-ui表单组件Radio

云会议运营喵大人 发表于 2020-02-21 18:33:18 02-21 18:33
云会议运营喵大人 发表于 2020-02-21 18:33:18 2020/02/21
0
0

【摘要】 Radio单选按钮。Radio UI 提供与WeLink规范一致的视图。参数说明参数类型默认值说明namestring-单选框name值valuestring-单选框value值checkedboolfalse选中状态onChangefunc-选中事件import React from 'react';import { CellsTitle, CellBody, CellBodyExp...

Radio


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

参数说明

参数类型默认值说明
namestring-单选框name值
valuestring-单选框value值
checkedboolfalse选中状态
onChangefunc-选中事件

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


登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请发送邮件至:huaweicloud.bbs@huawei.com;如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 0
点赞
分享文章到微博
分享文章到朋友圈

评论 (0)


0/1000
评论

登录后可评论,请 登录注册

评论

您还没有写博客的权限!

温馨提示

您确认删除评论吗?

确定
取消
温馨提示

您确认删除评论吗?

删除操作无法恢复,请谨慎操作。

确定
取消
温馨提示

您确认删除博客吗?

确定
取消

确认删除

您确认删除博客吗?

确认删除

您确认删除评论吗?

温馨提示

登录超时或用户已下线,请重新登录!!!

确定
取消