ant-design自定义表单组件回传值的问题

ant-design给我们提供了Form表单组件,但是由于排版,由于功能等原因,我们会需要自定义表单组件;但是原有的表单取值和验证使用保持不变。
ant-design表单组件我主要使用getFieldDecorator方法。
下面是父组件的表单,引用了一个自定义的表单组件OptionSelect,子组件里面可能数据格式或者数据个数不一样。

<FormItem label="选项">
       getFieldDecorator('option', {
              initialValue: [defaultValue.option || '0', defaultValue.word]
         })(
                <OptionSelect/>
         )}
</FormItem>

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

render() {
  const {value} = this.props;
  return(
      <div>
          <Select value={value[0]} onChange={this.selectChange}>
            //...
        </Select>
        <Input  value={value[1]} onChange={this.inputChange}/>
    </div>
  )
}
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方法通知父组件更新。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,352评论 25 709
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,397评论 19 139
  • 原文地址:React.js Forms: Controlled Components 原文作者:Loren Ste...
    iKcamp阅读 4,286评论 0 5
  • 我们一路聊着雨中的花,雨中的草,水中的小雨滴,石板缝里的苔藓。这一刻忽然好留恋为数不多无忧无虑的学前时光!
    狗狗宝贝家阅读 3,008评论 0 0
  • Android中常常使用shape来定义控件的一些显示属性,今天看了一些shape的使用,对shape有了大体的了...
    Stan_Z阅读 3,452评论 0 6