业务需求

父组件获取子组件数值，子组件是一个表单，包含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() {
    
    return (
        <EnergySortSearchBar
        // 父组件通过onChange获得子组件表单值
       onChange={
    this.handleSearchBarFormChange}
       initState={
    this.handleInitSearchBarValues}
      />
    );
  }

子组件

@Form.create({
    
  onFieldsChange(props, changedFields, allFields) {
    
  // 关键在这里，通过onFieldsChange获取表单变化值以及表单所有值，
  // 通过回调函数传给父组件
    props.onChange(changedFields, allFields); 
  },
})
class EnergySortSearchBar extends PureComponent {
     

 /**
   * 渲染建筑级联Cascade
   */
  renderBuildingCascade = () => {
    
    // 省略部分代码
    return (
      <FormItem name="buildings" label="建筑名称" labelCol={
    8} wrapperCol={
    16}>
        {
    getFieldDecorator(`buildings`, {
    
          initialValue,
        })(<Cascader {
    ...cProps} className={
    styles.item} onChange={
    this.handleBuildingChange} />)}
      </FormItem>
    );
  };
  
  /**
   * 渲染能源种类Select
   */
  renderEnergySorts = () => {
    
   // 省略部分代码
    return (
      <FormItem label="分类能耗" labelCol={
    8} wrapperCol={
    16}>
        {
    getFieldDecorator(`sorts`, {
    
          initialValue: sorts !== null ? sorts[0].name : null,
        })(
          <Select changeOnSelect placeholder="请选择能耗" className={
    styles.item}>
            {
    this.renderOptions(sorts)}
          </Select>
        )}
      </FormItem>
    );
  };
  /**
   * 渲染YearPicker
   * @return JSX
   */
  renderYearPicker = () => {
    
   // 省略部分代码
    return (
      <FormItem label="年份" labelCol={
    8} wrapperCol={
    16}>
        {
    getFieldDecorator(`year`, {
    
          initialValue: moment().format('YYYY'),
        })(<YearPicker onChange={
    this.handleYear} className={
    styles.item} displayDefaultTime />)}
      </FormItem>
    );
  };


render() {
    
      // 省略部分代码

    return (
      <div className={
    styles.tableListForm}>
        <Form layout="inline">
          <Row gutter={
    16} type="flex">
            <Col span={
    6}>{
    this.renderBuildingCascade()}</Col> /
            <Col span={
    4}>{
    this.renderEnergySorts()}</Col>
            <Col span={
    4}>{
    this.renderYearPicker()}</Col>
          </Row>
        </Form>
      </div>
    );
  }
}