Permalink
Browse files

add onPickerChange api #345

  • Loading branch information...
warmhug committed Oct 9, 2016
1 parent 86657fa commit 69e142cddc99b0d99ae23f3435e801ddd6ab014d
@@ -12,6 +12,7 @@ interface Props {
prefixCls?: string;
pickerPrefixCls?: string;
popupPrefixCls?: string;
onPickerChange?: (values) => void;
}

export default Props;
@@ -7,29 +7,67 @@ title: 基本

````jsx
import { Picker, List } from 'antd-mobile';
import { createForm } from 'rc-form';
import district from 'site/data/district';
import { createForm } from 'rc-form';
import province from 'site/data/province-lite';
let Test = React.createClass({
getInitialState() {
return {
data: [],
cols: 1,
};
},
onClick() {
console.log('start loading data');
setTimeout(() => {
this.setState({
data: district,
data: province,
});
}, 500);
},
setVal() {
this.props.form.setFieldsValue({
district: ['340000', '340800', '340822'],
onPickerChange(val) {
console.log(val);
let colNum = 1;
const d = [...this.state.data];
if (val[0] === 'zj') {
d.forEach(i => {
if (i.value === 'zj') {
colNum = 2;
if (!i.children) {
i.children = [{
value: 'zj-nb',
label: '宁波',
}, {
value: 'zj-hz',
label: '杭州',
}];
} else if (val[1] === 'zj-hz') {
i.children.forEach(j => {
if (j.value === 'zj-hz') {
j.children = [{
value: 'zj-hz-xh',
label: '西湖区',
}];
}
});
colNum = 3;
}
}
});
} else {
colNum = 1;
}
this.setState({
data: d,
cols: colNum,
});
},
// setVal() {
// this.props.form.setFieldsValue({
// district: ['340000', '340800', '340822'],
// });
// },
render() {
const { getFieldProps } = this.props.form;
return (<div>
@@ -39,7 +77,10 @@ let Test = React.createClass({
})}>
<List.Item arrow="horizontal">省市区选择</List.Item>
</Picker>
<Picker data={this.state.data} cols={2} {...getFieldProps('district2')}>
<Picker data={this.state.data} cols={this.state.cols}
{...getFieldProps('district2')}
onPickerChange={this.onPickerChange}
>
<List.Item arrow="horizontal" onClick={this.onClick}>省市选择(异步加载)</List.Item>
</Picker>
<Picker data={district} cols={1} {...getFieldProps('district3')} className="forss">
@@ -21,6 +21,7 @@ english: Picker
| format | 格式化选中的值 | Function | `(values) => { return values.join(','); } ` |
| cols | 列数 | Number | `3` |
| onChange | 选中后的回调 | Function(value) ,如果使用[rc-form](https://github.com/react-component/form),一般不需要自己处理| - |
| onPickerChange | 每列数据选择变化后的回调 | Function(value) | - |
| children| 通常是List.Item | Object | List.Item |
| okText | 选中的文案 | String | `确定` |
| dismissText | 取消选中的文案 | String | `取消` |
@@ -50,6 +50,7 @@ export default class Picker extends React.Component<tsPropsType, any> {
pickerPrefixCls={props.pickerPrefixCls}
data={props.data}
cols={props.cols}
onChange={props.onPickerChange}
/>
);
return (
@@ -1,5 +1,7 @@
/* eslint comma-dangle:0 */

/**
* data for ListView.IndexedList
*/
const data = [{
value: '11',
label: '北京市',

0 comments on commit 69e142c

Please sign in to comment.