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

Welink React-ui表单组件Picker

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

【摘要】 Picker多列选择器。Picker UI 提供与WeLink规范一致的视图。 主要包括:单列选择器、双列选择器、日期选择器。参数说明参数类型默认值说明groupsarray-选择器选项数组defaultSelectarray-选择的初始值索引showboolfalse是否显示picker组件onChangefunc-选择器选中的回调事件onCancelfunc-取消回调事件langobje...

Picker


多列选择器。Picker UI 提供与WeLink规范一致的视图。 主要包括:单列选择器、双列选择器、日期选择器。

参数说明

参数类型默认值说明
groupsarray-选择器选项数组
defaultSelectarray-选择的初始值索引
showboolfalse是否显示picker组件
onChangefunc-选择器选中的回调事件
onCancelfunc-取消回调事件
langobject{ leftBtn: 'Cancel', rightBtn: 'Ok' }左右操作按钮文案

import React from 'react';
import {
  Picker, Form, FormCell, CellBody, CellHeader, Label, Input
} from '@wecode/react-weui';

class PickerDemo extends React.Component {
  state = {
    pickerShow: false,
    pickerValue: '',
    pickerGroup: [
      {
        items: [
          {
            label: 'Item1'
          },
          {
            label: 'Item2 (Disabled)',
            disabled: true
          },
          {
            label: 'Item3'
          },
          {
            label: 'Item4'
          },
          {
            label: 'Item5'
          }
        ]
      },
      {
        items: [
          {
            label: 'Item1'
          },
          {
            label: 'Item2 (Disabled)',
            disabled: true
          },
          {
            label: 'Item3'
          },
          {
            label: 'Item4'
          },
          {
            label: 'Item5'
          }
        ]
      }
    ]
  };

  hide() {
    this.setState({
      pickerShow: false
    });
  }

  render() {
    const { pickerValue, pickerGroup, pickerShow } = this.state;
    return (
      <section>
        <Form>
          <FormCell>
            <CellHeader>
              <Label>Direct Picker</Label>
            </CellHeader>
            <CellBody>
              <Input
                type="text"
                onClick={e => {
                  e.preventDefault();
                  this.setState({ pickerShow: true });
                }}
                placeholder="Pick a item"
                value={pickerValue}
                readOnly
              />
            </CellBody>
          </FormCell>
        </Form>

        <Picker
          onChange={selected => {
            let value = '';
            selected.forEach((s, i) => {
              value = pickerGroup[i].items[s].label;
            });
            this.setState({
              pickerValue: value,
              pickerShow: false
            });
          }}
          groups={pickerGroup}
          show={pickerShow}
          onCancel={e => this.setState({ pickerShow: false })}
        />
      </section>
    );
  }
}
export default PickerDemo;


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

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

评论 (1)


曹明亮

1楼2020-09-01 16:51:43
日期的Picker,如何设置,目前支持吗,QQ:2755171146
0/1000
评论

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

评论

您还没有写博客的权限!

温馨提示

您确认删除评论吗?

确定
取消
温馨提示

您确认删除评论吗?

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

确定
取消
温馨提示

您确认删除博客吗?

确定
取消

确认删除

您确认删除博客吗?

确认删除

您确认删除评论吗?

温馨提示

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

确定
取消