Ant design 4.0.1 - 从父组件访问类组件内部子窗体的方法

Question

After migrating from ant v3.x to v4.0.1 I can no longer access the methods of my child form from its parent component.

In version 3.x I could do something similar to the following:

//Parent component - TestParent
import * as React from 'react';
import {createRef} from 'react';


export default class TestParent extends React.Component<{}, {}> {
  private formRef = createRef<any>();

  getFields = () => {
    const {form} = formRef.current.props;
    form.validateFields... ///etc
  }

  render() {
    return (
      <FormComponent
        wrappedComponentRef={this.formRef}
      />
      <Button onClick={() => {this.getFields()}>Button<Button/>
    );
  }
}


//Child component - FormComponent
import React from 'react';
import {Input, Form} from 'antd';

interface IProps {
  form: any;
}

class FormComponentContainer extends React.Component<Props, {}> {
   constructor(props: IProps) {
    super(props);
   }

  render() {
    const {form} = this.props;
    const {getFieldDecorator} = form;

    return (
      <Form>
        <Form.Item label="Full Name" colon={false}>
          {getFieldDecorator('name', {
            rules: [{required: true, message: 'Please enter your name'}]
          })(<Input placeholder="Please enter your name" />)}
        </Form.Item>
      </Form>
    );
  }
}

export const FormComponent: any = Form.create<Props>({
  name: 'form'
})(FormComponentContainer);

And I can access the child form fields using formRef .

However, since migrating to ant 4.0.1 I can no longer access the form fields, using the ref prop on the new Form component:

//Parent component - TestParent
import * as React from 'react';
import {createRef} from 'react';


export default class TestParent extends React.Component<{}, {}> {
  private formRef = createRef<any>();

  getFields = () => {
    const {form} = formRef.current.props;
    form.validateFields... ///etc
  }

  render() {
    return (
      <FormComponent
        formRef={this.formRef}
      />
      <Button onClick={() => {this.getFields()}>Button<Button/>
    );
  }
}


//Child component - FormComponent
import React from 'react';
import {Input, Form} from 'antd';

interface Props {
  formRef: any;
}

export default class FormComponentContainer extends React.Component<Props, {}> {
   constructor(props: Props) {
    super(props);
   }

  render() {
       return (
      <Form ref={this.props.formRef}>
        <Form.Item
          label="Full Name"
          colon={false} 
          name="name"
          rules={[{required: true, message: 'Please enter your name'}]}
        >
          <Input placeholder="Please enter your name" />
        </Form.Item>
      </Form>
    );
  }
}

Is there something I'm missing? Both the parent and the child need to be class components, as opposed to functional components.

Answer 1

Not if this is in your final code,

but

formRef.current is already the form ref,

so to use it should be just

getFields = () => {
    const form = formRef.current;
    form.validateFields... ///etc
  }

see https://ant.design/components/form/#components-form-demo-control-ref

also if the only thing you want is to validate, you can use the new onFinish callback

Answer 2

I think you can use react ref forwarding ( https://reactjs.org/docs/forwarding-refs.html#forwarding-refs-to-dom-components ) to solve your problem.

Here is a concrete example to show you how to use ref forwarding with antd:

Child component:

import { Form, Input } from 'antd'

const ChildComponent = React.forwardRef((props, ref) => (
  <Form ref={ref} layout="vertical" name="item">
    <Form.Item
      name="designation"
      label="designation"
      rules={[{ required: true, message: 'mandatory' }]}
    >
      <Input />
    </Form.Item>

    <Form.Item
      name="quantity"
      label="quantity"
      rules={[{ required: true, message: 'mandatory' }]}
    >
      <Input />
    </Form.Item>
    <Form.Item name="ean" label="ean">
      <Input />
    </Form.Item>
    <Form.Item
      name="sku"
      label="sku"
      rules={[{ required: true, message: 'mandatory' }]}
    >
      <Input />
    </Form.Item>
    <Form.Item
      name="price"
      label="price"
      rules={[
        {
          required: true,
          message: 'mandatory',
        },
      ]}
    >
      <Input />
    </Form.Item>
  </Form>
))

export default ChildComponent

ParentComponent:

import React, { useRef } from 'react'
import { Button } from 'antd'
import ChildComponent from './ChildComponent'

function ParentComponent() {
  const ref = useRef(null)

  function handleClick() {
    ref.current.validateFields().then(values => {
      console.log(values)
    })
  }

  return (
    <>
      <Button onClick={handleClick}>Validate</Button>
      <ChildComponent ref={ref} />
    </>
  )
}

export default ParentComponent