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>

    );

  }

}