react 的选项选择器组件，支持多级联动

forked from springalskey/picker

在原有的基础上优化了实现，更换了更清晰的数据格式，更好的交互体验。

Chrome打开开发者工具，切换到手机模拟器预览
demo

手机二维码扫描预览

$ npm install spring-picker2 -S

import 'spring-picker/lib/style.css'; import { Picker, Popup, PopupPicker } from 'spring-picker'; constructor(){ // 数据结构例子 this.state = { selected:{ year: '2018', month: '02' } } this.data = { "year": [ {name:"2018年",value:"2018"}, {name:"2019年",value:"2019"}, ], "month":[ {name:"1月", value:"01"}, {name:"2月", value:"02"}, ] }; } render(){ // 使用方式1，使用PopupPicker，只需要传递数据 <PopupPicker data={this.data} selectedValue={this.state.selected} visible={this.state.visible2} onCancel={()=>this.setState({ visible2: false })} onSelect={selectedValue=>this.setState({ visible2: false, selectedValue })} onChanging={(selectedValue, key, value, name)=>{ console.log(selectedValue, key, value, name) }} /> // 使用方式2，自己组合 <Popup onCancel={this.cancelUserPicker.bind(this)} onConfirm={this.closeUserPicker.bind(this)} visible={this.state.userPickerVisible}> <Picker onChange={this.handleChangeUser.bind(this)} data={this.data.year} selectedValue={this.state.selected.year} /> </Popup> } API PopupPicker