react 父组件无法调用到子form组件中的方法？

Question

react父组件调用子组件方法异常，代码如下

父组件部分代码：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Button, Input, Icon, Table, Pagination, Modal, Form, } from 'antd';

class UserTable extends Component {
    onRowClick = (record, index) => {
        console.log(this.refs.view);
        this.refs.view.viewShowModal(record);
    }
    
    render() {
    const { selectedRowKeys } = this.state;
    const rowSelection = {
      type: "radio",
      selectedRowKeys,
      onChange: this.onSelectChange,
      onSelect: this.onSelect,
    };
    return (
      <div>
        <div style={{ marginBottom: 16 }}>
          <UserModal style={{display:"inline-block"}} ref="view" />
        </div>
        <Table rowKey="id" pagination= {false} rowSelection={rowSelection} columns={columns} dataSource={this.state.datasource}
          onRowClick={this.onRowClick} style={{minWidth:'700px',scroll:'overflow'}} />
      </div>
    );
  }
}
export default UserTable;    

子组件部分代码：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Layout,Button, Input, Modal, Form, DatePicker, Radio, Row, Col } from 'antd';
import moment from 'moment';
      
class UserModal extends React.Component {
  state = { visible: false, user: {}  }       
  viewShowModal = (recordData) => {
    this.setState({visible: true, user: recordData});
  }
  
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div>
          test
      </div>  
    );
  }
}

UserModal = Form.create()(UserModal);
export default UserModal;

其中子组件必须用 Form.create()，而这样原本使用 ref 来获取子组件的函数就变得无法调用到，我想知道使用 Form.create() 后怎样才能从父组件中调用到子组件的函数

Answer 1

没有用过antd，不清楚antd有没有提供获取ref的方法，建议你可以先看antd - Form的源码。

如果找不到的话，给你提供另外一个思路，我猜你是想要调用viewShowModal这个函数：

onRowClick = (record, index) => {
    this.viewShowModal(record);
}

// render
<UserModal style={{display:"inline-block"}} viewShowModal={fn=> { this.viewShowModal = fn; }} />

class UserModal extends React.Component {
  constructor(props){
    super(props);
    props.viewShowModal(this.viewShowModal);
  }

  // .....
}

Answer 2

//子组件
class Form extends React.Component { ... }
const EnhancedForm = createForm()(Form);

//父组件调用时
<EnhancedForm wrappedComponentRef={(inst) => this.formRef = inst} />

//通过this.formRef就能得到你想要的方法
this.formRef // => The instance of Form

Answer 3

遇到同样的问题， 求解

Answer 4

可能是antd的组建被什么插件包裹了，所以ref并不好使，具体的你可以下载谷歌的插件，react插件，在控制台上就能看到它的这个组建是否被包裹了！！
其次，这样的方法可以换个思路，写在父组件中，通过props传递给子组件，方法设计到的状态也传递下去！！

Answer 5

子组件不全?我理解你Form是不是应该在Modal里面?

<Modal title="Basic Modal" visible={this.state.visible} onOk={this.handleOk} onCancel={this.handleCancel}>
    <Form />        
</Modal>

Answer 6

<UserModal style={{display:"inline-block"}} ref="view" />中
ref 改成 wrappedComponentRef