鍍金池/ 問答/HTML/ antd form.create 后父組件如何獲取到子組件的自定義方法

antd form.create 后父組件如何獲取到子組件的自定義方法

代碼如下:

import React from 'react';
import { Form, Select, Pagination, Input } from 'antd';
import { connect } from 'dva';
import { Router, Route, browserHistory } from  'dva/router';
const { Item, create } = Form
const { Option }= Select

//子組件,有自定義方法method
class FancySearchForm extends React.Component{
    method(value){
        console.log("show me the money")
    }
    render() {
        const { form } = this.props
        const { getFieldDecorator } = form
        return (
              <div>
                 <Form>
                      <Item
                        labelCol={{ span: 7 }}
                        wrapperCol={{ span: 4 }}
                    >
                         <Input.Search 
                               ref={(ref) => { this.ref = ref}}
                               onSearch={ value => this.handleSearch(value)} 
                           />
                    </Item>
                </Form>
             </div>
        )
    }
}
const WrappedAdvancedSearchFormWithRef = Form.create()(FancySearchForm);

//父組件
class ParentComponent extends React.Component{
      onChange(){
        console.log(this.formRef,'fffffffffffff')
      }
      render() {
        return (
            <div>
                <WrappedAdvancedSearchFormWithRef wrappedComponentRef={(inst) => this.formRef = inst} />
                <Pagination defaultCurrent={1} total={50} onChange={this.onChange.bind(this)}/>
           </div>
        )
      }
}
export default ParentComponent;

我使用了官方推薦的wrappedComponentRef方式,獲取到了子組件的實(shí)例,但是打印出來卻不是自己所期望的那樣有method方法
圖片描述

請問下我是哪里寫錯了,還是這種官網(wǎng)并沒有掛載自定義方法上去?。?/p>

這是參考的例子:
https://github.com/react-comp...
這是官網(wǎng)的說明:
https://github.com/react-comp...
有以下片段代碼:

class Form extends React.Component { ... }

// deprecated
const EnhancedForm = createForm({ withRef: true })(Form);
<EnhancedForm ref="form" />
this.refs.form.refs.wrappedComponent // => The instance of Form

// Recommended
const EnhancedForm = createForm()(Form);
<EnhancedForm wrappedComponentRef={(inst) => this.formRef = inst} />
this.formRef // => The instance of Form

這個問題困擾了不少人啊,有哪位大俠出手相助??!

回答
編輯回答
醉淸風(fēng)

<Modal
onOk={ (e)=>this.formRef.handleSubmit(e) }

<From
wrappedComponentRef={(inst) => this.formRef = inst}
/>
</Modal>

2017年5月11日 23:17
編輯回答
生性

this.formRef.props.form 這個才是你想要的form。里面有對應(yīng)的方法

2018年3月30日 12:43
編輯回答
熟稔

不用箭頭函數(shù)的話,屬性里看不到,用箭頭函數(shù)的話,屬性中能夠看到該方法。對結(jié)果無影響,都能夠在父組件中調(diào)用到

2017年10月25日 04:44
編輯回答
雨萌萌

子組件method這個方法 要用箭頭函數(shù) 不然這個函數(shù)是綁定不到子組件this上面的,所以你在父組件取不到。我剛好遇到然后解決了。。。

2017年12月4日 18:03