# Picker

- category: UI
- chinese: 选择器
- type: UI Component

---

## Usage

a universal selector && a select component similar to the web.
Currently only one-dimensional arrays are supported.


## API


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

- options params

| Parameter   | Description                                   | Type   | Default                               |
| :---------- | :-------------------------------------------- | :----- | :------------------------------------ |
| title       | title                                         | string |                                       |
| dataSource  | tree structure, or array                      | array  |                                       |
| selectedKey | the default value of the Picker(uncontrolled) | number | 0                                     |
| locale      | copy of confirm or cancel                     | object | {cancel: 'cencel',confirm: 'confirm'} |


- onNotify：Picker trigger event
- onCancel：Picker cancel event

- dataSource structure


````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, // button at bottom
  hasToolbar:true, // header
  hasToolbarButton:false,// confirm or cancel button 
}, (result) => {
  this.setState({
    data: data[result.data],
    selected: result.data
  });
}, (e) => {
  console.log('canceled')
});
````

## The Other
- Chat with <a href="dingtalk://dingtalkclient/action/sendmsg?dingtalk_id=kjwo3w5">@翊晨[yichen]</a> in Dingtalk desktop App <a href='https://tms.dingtalk.com/markets/dingtalk/download'>Download</a>
- DingTalk Group

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