Picker

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

参数说明

效果示例

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;