antd 的form 表单怎么回显数据_ant-design自定义表单组件回传值的问题

ant-design给我们提供了Form表单组件，但是由于排版，由于功能等原因，我们会需要自定义表单组件；但是原有的表单取值和验证使用保持不变。

ant-design表单组件我主要使用getFieldDecorator方法。

下面是父组件的表单，引用了一个自定义的表单组件OptionSelect，子组件里面可能数据格式或者数据个数不一样。

getFieldDecorator('option', {

initialValue: [defaultValue.option || '0', defaultValue.word]

})(

)}

父组件使用getFieldDecorator最后可以取到option选项的值，但是这是一个值，他怎么和子组件的关联？

子组件props：

render() {

const {value} = this.props;

return(

//...

)

}

selectChange(val) {

const {onChange} = this.props;

//通知父组件更新

//封装数据传参

let changeVal;

//...

onChange(changeVal)

}

inputChange(e) {

const {onChange} = this.props;

}

OptionSelect.propTypes = {

value: PropTypes.array,

onChange: PropTypes.func

};

getFieldDecorator这个方法会向组件注入value参数，onChange方法。子组件通过value参数来初始化值，通过onChange方法通知父组件更新。