# Picker

- category: UI
- chinese: 选择器
- type: UI组件

---

## 何时使用

一个通用选择器，类似于 web 的 select 组件。 目前仅支持一维数组的情况。


## API


### Picker.show(options,onSelect,onCancel)

- options 参数

| 参数        | 说明                     | 类型   | 默认值                           |
| :---------- | :----------------------- | :----- | :------------------------------- |
| title       | 标题                     | string |                                  |
| dataSource  | 数据源, 树形结构或数组   | array  |                                  |
| selectedKey | Picker的默认值（非受限） | number | 0                                |
| locale      | 确认取消按钮文案         | object | {cancel: '取消',confirm: '确认'} |


- onNotify：Picker点击确认触发的事件
- onCancel：Picker取消触发的事件

- dataSource 结构

````js

let data = [ 'Rick' ,'Morty' ,'Hulk' , 'Iron Man' ]

````
- selectedKey

````js
// 数组索引
selectedKey: 1

````

````js
Picker.show({
  title: 'Please choose',
  dataSource: data,
  selectedKey: this.state.selected,
  hasBottomButton:true, // 底部按钮
  hasToolbar:true, // 头部
  hasToolbarButton:false,// 头部确定、取消按钮
}, (result) => {
  this.setState({
    data: data[result.data],
    selected: result.data
  });
}, (e) => {
  console.log('canceled')
});
````

## 其他
- bug、建议联系 <a href="dingtalk://dingtalkclient/action/sendmsg?dingtalk_id=kjwo3w5">@翊晨</a>
- 钉钉交流群

<img src="https://img.alicdn.com/tfs/TB101EESpXXXXXFXpXXXXXXXXXX-1122-1362.jpg" width="260" />