Picker 选择器

在一组预设值中进行选择，eg：省市区选择。

规则

尽量使用 Picker 来帮助用户完成输入，避免用户通过键盘直接输入。
DatePicker 是 Picker 的特定模式。

代码演示

数据级联选择示例. (rc-form 文档)

import { Picker, List, WhiteSpace } from 'antd-mobile';
import { createForm } from 'rc-form';
import { district, provinceLite as province } from 'antd-mobile-demo-data';
// 如果不是使用 List.Item 作为 children
const CustomChildren = (props) => (
  <div
    onClick={props.onClick}
    style={{ backgroundColor: '#fff', padding: '0 0.3rem' }}
  >
    <span style={{ display: 'inline-block', width: '40%' }}>{props.children}</span>
    <span style={{ height: '0.9rem', lineHeight: '0.9rem', float: 'right' }}>{props.extra}</span>
  </div>
);
let Test = React.createClass({
  getInitialState() {
    return {
      data: [],
      cols: 1,
      pickerValue: [],
    };
  },
  onClick() {
    setTimeout(() => {
      this.setState({
        data: province,
      });
    }, 120);
  },
  onPickerChange(val) {
    console.log(val);
    let colNum = 1;
    const d = [...this.state.data];
    if (val[0] === 'zj') {
      d.forEach(i => {
        if (i.value === 'zj') {
          colNum = 2;
          if (!i.children) {
            i.children = [{
              value: 'zj-nb',
              label: '宁波',
            }, {
              value: 'zj-hz',
              label: '杭州',
            }];
          } else if (val[1] === 'zj-hz') {
            i.children.forEach(j => {
              if (j.value === 'zj-hz') {
                j.children = [{
                  value: 'zj-hz-xh',
                  label: '西湖区',
                }];
              }
            });
            colNum = 3;
          }
        }
      });
    } else {
      colNum = 1;
    }
    this.setState({
      data: d,
      cols: colNum,
    });
  },
  // setVal() {
  //   this.props.form.setFieldsValue({
  //     district: ['340000', '340800', '340822'],
  //   });
  // },
  render() {
    const { getFieldProps } = this.props.form;
    return (<div>
      <WhiteSpace size="lg" />
      <List style={{ backgroundColor: 'white' }} className="picker-list">
        <Picker extra="请选择(可选)" data={district} title="选择地区" {...getFieldProps('district', {
          initialValue: ['340000', '341500', '341502'],
        })}
        >
          <List.Item arrow="horizontal">省市区选择</List.Item>
        </Picker>
        <Picker
          data={this.state.data}
          cols={this.state.cols}
          {...getFieldProps('district2')}
          onPickerChange={this.onPickerChange}
        >
          <List.Item arrow="horizontal" onClick={this.onClick}>省市选择(异步加载)</List.Item>
        </Picker>
        <Picker data={district} cols={1} {...getFieldProps('district3')} className="forss">
          <List.Item arrow="horizontal">选择省份</List.Item>
        </Picker>
      </List>
      <WhiteSpace size="lg" />
      <Picker
        data={district}
        title="选择地区"
        extra="请选择(可选)"
        value={this.state.pickerValue}
        onChange={(v) => this.setState({ pickerValue: v })}
      >
        <CustomChildren>省市区选择(自定义 children)</CustomChildren>
      </Picker>
    </div>);
  },
});
Test = createForm()(Test);
ReactDOM.render(<Test />, mountNode);

.picker-list .am-list-item .am-list-line .am-list-extra {
  flex-basis: initial;
}

API ( 适用平台：WEB、React-Native )

成员	说明	类型	默认值
data	数据源	Array<{value, label, children: Array}>	-
value	值, 格式[value1, value2, value3], 对应数据源的N级value	Array	-
format	格式化选中值的函数	(val): void	`(values) => { return values.join(','); }`
cols	列数	Number	`3`
onChange	选中后的回调函数，如果使用rc-form,一般不需要自己处理	(val): void	-
onPickerChange	每列数据选择变化后的回调函数	(val): void	-
children	通常是 List.Item	Object	List.Item
okText	选中的文案	String	`确定`
dismissText	取消选中的文案	String	`取消`
title	大标题	String	-
extra	Picker children 建议是 List.Item, 如果不是，需要是自定义组件(组件内需处理`onClick`/`extra`属性)	String	`请选择`

更多参数及支持情况可参考：https://github.com/react-component/m-cascader

Picker选择器

Picker 选择器

规则

代码演示

API ( 适用平台：WEB、React-Native )