Picker 选择组件

作为基础组件,提供一个ios原生的选择样式,本身不提供过多的样式,可以传入class去进一步定制化。通常配合Modal和Animate组件一起使用。

示例

代码节选自:yis-demo/src/pages/components/picker/index.js
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>
        )
    }
}

示例 实现 popup picker

代码节选自:yis-demo/src/pages/components/picker/popuppicker/index.js
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 × 选项的单位