作为基础组件，提供一个ios原生的选择样式，本身不提供过多的样式，可以传入class去进一步定制化。通常配合Modal和Animate组件一起使用。
export default class PickerDemo extends PageCore {
state = {
data:[],
value: {
f: '0',
t: '0'
},
list: []
}
onChange = ({value}) => {
this.setState({
value
});
}
changeValue = () => {
const value = {
t: Math.round(Math.random()* 19),
f: Math.round(Math.random()* 19)
}
this.setState({
value
})
}
// ...
render(){
return (
<Page>
<span className={styles.center}>{`当前的 value值为 ${this.state.value.f}, ${this.state.value.t}`}</span>
<Button label="点击更改 value" onTouchTap={this.changeValue} accent large/>
{
<Picker
className={styles.picker_demo}
data={this.state.data}
value = {this.state.value}
onChange = {this.onChange}
/>
}
</Page>
)
}
}
export default class PickerPopupDemo extends PageCore {
state = {
data:[{
data: [
{
id: "month",
text: "一个月"
},
{
id: "week",
text: "一周"
},
{
id: "day",
text: "一天"
}
],
key: 'type',
unit: "1次"
}],
value: {
type: 'month'
},
showPopup: false
};
onChange = ({value}) => {
this.setState({
value
});
}
cancel = () => {
this.setState({
showPopup: false
})
}
render(){
return (
<Page>
<span className={styles.center}>{`当前的 value值为 ${this.state.value.type}`}</span>
<Button label="点击弹出选项" onTouchTap={() =>{
this.setState({
showPopup: true
})
}} accent large/>
<Modal
// ...
displayState={this.state.showPopup}
onTouchMask={()=>{
this.setState({
showPopup: false
})
}}
onShow={()=>{
console.log('show')
}}
onHide={()=>{
console.log('hide')
}}
>
<Animate
on={this.state.showPopup}
>
<div className={styles.header}>
<View onTouchTap={this.cancel}
// ...
>
<span >取消</span>
</View>
<div className={styles.title}>弹框标题</div>
<View onTouchTap={this.cancel}
// ...
>
<span>确定</span>
</View>
</div>
{
<Picker
className={styles.picker_demo}
data={this.state.data}
value = {this.state.value}
onChange = {this.onChange}
/>
}
</Animate>
</Modal>
</Page>
)
}
}
| 参数名 | 类型 | 必选 | 默认值 | 描述 |
|---|---|---|---|---|
| data | array | √ | 无 | 选项数据 |
| value | object | √ | 无 | 选中的选项 |
| onChange | function | √ | 无 | 选中回调函数 |
| className | string | × | 无 | 根节点附加类名 |
| unit | string 或 null | × | 无 | 选项的单位 |