时间戳

首页 > 解决方案 > Ant design 4.0.1 - 从父组件访问类组件内子窗体的方法

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

问题描述

从 ant v3.x 迁移到 v4.0.1 后，我无法再从其父组件访问子窗体的方法。

在 3.x 版本中，我可以执行类似于以下的操作：

//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);

我可以使用formRef.

但是，自从迁移到 ant 4.0.1 后，我无法再使用ref新 Form 组件上的 prop 访问表单字段：

//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>
    );
  }
}

有什么我想念的吗？父级和子级都需要是类组件，而不是功能组件。

标签： reactjstypescriptantd

解决方案

如果这是在您的最终代码中，则不是，

但

formRef.current已经是 ref 的形式，

所以使用它应该只是

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

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

此外，如果您只想验证，您可以使用新的onFinish回调

推荐阅读