Ant Design父组件一次性获取子组件表单值

最新推荐文章于 2024-07-18 16:11:50 发布

成续源

最新推荐文章于 2024-07-18 16:11:50 发布

阅读量1.5k

点赞数

分类专栏： Ant Design Pro 文章标签： javascript es6 前端 reactjs

本文链接：https://blog.youkuaiyun.com/qq_34307801/article/details/105710314

版权

文章目录

业务需求
实现思路

业务需求

父组件获取子组件数值，子组件是一个表单，包含Cascader、Select两种类型组件，其中能源类型Select根据Cascader数值拿到，效果如图：
在这里插入图片描述
其中antd版本3.26.3

实现思路

通过使用 onFieldsChange获取表单值，通过回调函数传给父组件。antd官方说明

父组件


  // changedFields是子组件表单变化值，allFields是子组件表单所有值
  handleSearchBarFormChange = (changedFields, allFields) => {
   
    const obj = {
   
      buildingId: allFields.buildings.value[1],
      energySort: allFields.sorts.value,
      year: allFields.year.value,
    };

    if (obj.buildingId !== null && obj.energySort !== null && obj.year !== null) {
   
      this.generateTreeData(this.pageType, obj.buildingId, obj.energySort);
      this.setState({
   
        searchBar: obj,
      });
    }
  };


 render(