0

代码如下:

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

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

2017-09-10 提问

查看全部 4 个回答

5

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

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

推广链接