DropDown

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

参数说明

效果示例

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