antd-mobile中无法调用Picker、inputItem、datePicker等组件中的onChange回调函数

问题描述：

使用antd-mobile+rc-form做表单时，发现Picker等组件中的onChange回调函数用onChange={this.onChange}无法触发，封装的子组件无法像父组件传值。

注意：此处只是针对onChange的回调函数，其他回调函数依旧可以正常使用，因为，rc-form会获取onChange事件的变化来更新form表单里的值，导致此处像往常一样用onChange报错

原代码：可以触发

//子组件
import React, { Component } from 'react'
import './index.less'
import { Picker,List } from 'antd-mobile';
class selectPicker extends Component{
	constructor(props) {
        super(props);
        this.state = {

        };
	}
	componentWillMount(){  }
	componentDidMount(){}
    onChange = (val) => {
      console.log(val,"onChange");//此时可以打印出选中的value
    }
	render(){
         const { placeholder,data,title,keyName,rules ,disabled=false,initialValue} = this.props;
         const { getFieldProps, getFieldError } = this.props.form;
		return (
            <List style={{ backgroundColor: 'white' }} className="picker-list">
              <Picker
                data={data}
                cascade={false}
                extra={placeholder}
                onChange={this.onChange}
                cols={1} 
                disabled={disabled}> 
                <List.Item 
                  arrow="none" 
                  className={rules?"formItem-required":""}
                >{title}</List.Item>
                </Picker>
            </List>
           
		)
	}
}
export default selectPicker;

引入form中的getFieldProps去管理picker

在Picker中加入如下代码

 {...getFieldProps(keyName,
     { 
        initialValue:initialValue,
        rules:rules ,
     }
 )}

 变成如下代码后onChange无法触发

//子组件
import React, { Component } from 'react'
import './index.less'
import { Picker,List } from 'antd-mobile';
class selectPicker extends Component{
	constructor(props) {
        super(props);
        this.state = {

        };
	}
	componentWillMount(){  }
	componentDidMount(){}
    onChange = (val) => {
      console.log(val,"onChange");//此时不打印该条信息，没有触发onChange事件
    }
	render(){
         const { placeholder,data,title,keyName,rules ,disabled=false,initialValue} = this.props;
         const { getFieldProps, getFieldError } = this.props.form;
		return (
            <List style={{ backgroundColor: 'white' }} className="picker-list">
              <Picker
                data={data}
                cascade={false}
                extra={placeholder}
                onChange={this.onChange}
                cols={1} 
                {...getFieldProps(keyName,
                  { 
                    initialValue:initialValue,
                      rules:rules ,
                  }
                )}
                disabled={disabled}> 
                <List.Item 
                  arrow="none" 
                  className={rules?"formItem-required":""}
                >{title}</List.Item>
                </Picker>
            </List>
           
		)
	}
}
export default selectPicker;

解决办法：此时所有的回调函数都需要加上（）如下

onChange={this.onChange()}

虽然这样改能触发onChange事件，却不能获取里面的val值，这是一个问题，那么我们要怎么获取这个值呢？这是个问题，我能想到的就只有是通过

this.props.form.getFieldsValue()[keyName]

来获取。其中keyName是你想获取的值得名称。

修改后的完成子组件代码如下：

//子组件
import React, { Component } from 'react'
import './index.less'
import { Picker,List } from 'antd-mobile';
class selectPicker extends Component{
	constructor(props) {
        super(props);
        this.state = {};
	}
	componentWillMount(){  }
	componentDidMount(){}

        onChange = (keyName) => {
            this.props.onChange(this.props.form.getFieldsValue()[keyName])//此时就可以把获取的值往父组件传啦
        }
	render(){
         const { placeholder,data,title,keyName,rules ,disabled=false,initialValue} = this.props;
         const { getFieldProps, getFieldError } = this.props.form;
		return (
            <List style={{ backgroundColor: 'white' }} className="picker-list">
              <Picker
                data={data}
                cascade={false}
                extra={placeholder}
                onChange={this.onChange(keyName)}
                cols={1} 
                {...getFieldProps(keyName,
                  { 
                    initialValue:initialValue,
                      rules:rules ,
                  }
                )}
                disabled={disabled}> 
                <List.Item 
                  arrow="none" 
                  className={rules?"formItem-required":""}
                >{title}</List.Item>
                </Picker>
            </List>
           
		)
	}
}
export default selectPicker;