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

筛选组件DropDown

云会议运营喵大人 发表于 2020-03-10 15:48:44 03-10 15:48
云会议运营喵大人 发表于 2020-03-10 15:48:44 2020/03/10
0
0

【摘要】 DropDown下拉筛选。DropDown UI UI提供与WeLink规范一致的视图。参数说明名称类型默认值说明valuestring选中的值radioNamestring下拉菜单name属性dataSourcearray下拉菜单数据显示数据placeholderstring未选择是显示字样onChangefunc下拉菜单选中事件import React from 'react';impo...

DropDown


下拉筛选。DropDown UI UI提供与WeLink规范一致的视图。

参数说明

名称类型默认值说明
valuestring
选中的值
radioNamestring
下拉菜单name属性
dataSourcearray
下拉菜单数据显示数据
placeholderstring
未选择是显示字样
onChangefunc
下拉菜单选中事件

import React from 'react';

import {

  DropDown, DropDownArea

} from '@wecode/react-weui';


export default class DropDownDemo extends React.Component {

  state = {

    value: '0',

    value1: '1',

    value2: '2',

    value3: '3',

    valueA: '0',

    valueB: '1',

    dataSource: [

      { label: '全部', value: '0' },

      { label: '审批中', value: '1' },

      { label: '被驳回', value: '2' },

      { label: '完成', value: '3' },

      { label: '求助', value: '2' },

      { label: '讨论', value: '5' },

      { label: '博客', value: '6' },

      { label: '专家', value: '7' },

      { label: '顾问', value: '8' },

      { label: '学者', value: '9' },

      { label: '硕士', value: '10' },

      { label: '博士', value: '11' },

      { label: '院士', value: '12' },

      { label: '首席', value: '13' },

      { label: '上尉', value: '14' },

      { label: '中尉', value: '15' },

      { label: '少校', value: '16' },

      { label: '中校', value: '17' },

      { label: '上校', value: '18' },

      { label: '少将', value: '19' },

      { label: '中将', value: '20' },

      { label: '上将', value: '21' },

      { label: '元帅', value: '22' }

    ]

  }


  handleChangeValue = (key, value) => {

    this.setState({ [key]: value });

  }


  render() {

    const {

      dataSource, value1, value, value2, value3, valueA, valueB 

    } = this.state;

    return (

      <section>

        <DropDownArea>

          <DropDown

            key="1"

            value={value1}

            radioName="radiogroup1"

            dataSource={dataSource}

            placeholder="请选择数据"

            onChange={value => this.handleChangeValue('value1', value)}

          />

          <DropDown

            key="2"

            value={value2}

            radioName="radiogroup1"

            dataSource={dataSource}

            placeholder="请选择数据"

            onChange={value => this.handleChangeValue('value2', value)}

          />

          <DropDown

            key="3"

            value={value3}

            radioName="radiogroup1"

            dataSource={dataSource}

            placeholder="请选择数据"

            onChange={value => this.handleChangeValue('value3', value)}

          />

        </DropDownArea>


        <div style={{ width: '100%', marginTop: '60px' }}>

          <DropDownArea>

            <DropDown

              key="a"

              value={valueA}

              radioName="radiogroup2"

              dataSource={dataSource}

              placeholder="请选择数据"

              onChange={value => this.handleChangeValue('valueA', value)}

            />

            <DropDown

              key="b"

              value={valueB}

              radioName="radiogroup2"

              dataSource={dataSource}

              placeholder="请选择数据"

              onChange={value => this.handleChangeValue('valueB', value)}

            />

          </DropDownArea>

        </div>

        <div style={{ width: '100%', marginTop: '60px' }}>

          <DropDown

            key="0"

            value={value}

            radioName="radio"

            dataSource={dataSource}

            placeholder="请选择数据"

            onChange={value => this.handleChangeValue('value', value)}

          />

        </div>

      </section>

    );

  }

}


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

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

评论 (0)


0/1000
评论

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

评论

您还没有写博客的权限!

温馨提示

您确认删除评论吗?

确定
取消
温馨提示

您确认删除评论吗?

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

确定
取消
温馨提示

您确认删除博客吗?

确定
取消

确认删除

您确认删除博客吗?

确认删除

您确认删除评论吗?

温馨提示

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

确定
取消