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

Welink React-ui表单组件Switch

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

【摘要】 Switch选择开关。Switch UI 提供与WeLink规范一致的视图。参数说明参数类型默认值说明checkedboolfalse是否打开onChangefunc-变更Switch状态事件import React from 'react';import { CellsTitle, CellBody, CellBodyExplan, CellFooter, Form, Form...

Switch


选择开关。Switch UI 提供与WeLink规范一致的视图。

参数说明

参数类型默认值说明
checkedboolfalse是否打开
onChangefunc-变更Switch状态事件

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

class SwitchDemo extends React.Component {
  state = {
    checked: true,
    checkedBody: true
  };

  handelChangeChecked=(key, e)=>{
    this.setState({ [key]: e.target.checked });
  }

  render() {
    const { checked, checkedBody } = this.state;
    return (
      <section>
        <CellsTitle>Switch开关</CellsTitle>
        <Form>
          <FormCell switch>
            <CellBody>主文体</CellBody>
            <CellFooter>
              <Switch checked={checked} onChange={e => this.handelChangeChecked('checked', e)} />
            </CellFooter>
          </FormCell>
          <FormCell switch>
            <CellBody>
              主文体
              <CellBodyExplan>此处是辅助说明文体,说明文本</CellBodyExplan>
            </CellBody>
            <CellFooter>
              <Switch checked={checkedBody} onChange={e => this.handelChangeChecked('checkedBody', e)} />
            </CellFooter>
          </FormCell>
        </Form>
      </section>
    );
  }
}

export default SwitchDemo;


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

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

评论 (0)


0/1000
评论

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

评论

您还没有写博客的权限!

温馨提示

您确认删除评论吗?

确定
取消
温馨提示

您确认删除评论吗?

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

确定
取消
温馨提示

您确认删除博客吗?

确定
取消

确认删除

您确认删除博客吗?

确认删除

您确认删除评论吗?

温馨提示

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

确定
取消