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方式,获取到了子组件的实例,但是打印出来却不是自己所期望的那样有method方法
图片描述

请问下我是哪里写错了,还是这种官网并没有挂载自定义方法上去啊?

这是参考的例子:
https://github.com/react-comp...
这是官网的说明:
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

这个问题困扰了不少人啊,有哪位大侠出手相助啊!

阅读 22.7k
4 个回答

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

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

this.formRef.props.form 这个才是你想要的form。里面有对应的方法

子组件method这个方法 要用箭头函数 不然这个函数是绑定不到子组件this上面的,所以你在父组件取不到。我刚好遇到然后解决了。。。

新手上路,请多包涵

不用箭头函数的话,属性里看不到,用箭头函数的话,属性中能够看到该方法。对结果无影响,都能够在父组件中调用到

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏