ReactJS: TypeError: this.ref.current.method не является функцией с формой проектирования муравья - PullRequest
Новая
       15

ReactJS: TypeError: this.ref.current.method не является функцией с формой проектирования муравья

0 голосов
/ 07 февраля 2019 
class Parent extends Component {

    constructor(props) {
        super(props);
        this.Child_A = React.createRef();  
        this.Child_B = React.createRef();
    }

    function_uses_Child_A = ()=> {
        // This is working fine
        this.Child_A.current.Child_A_Function()
    }

    function_uses_Child_B = ()=> {
        // This is Does NOT work
        // this.Child_A.current.Child_B_Function() is not a function 
        this.Child_A.current.Child_B_Function()
    }

    render() {
        return (
            <div>
                <Child_A ref={this.Child_A}/>
                <Child_B ref={this.Child_B}/>   
            </div>
        );
    }
}
export default Parent;

Приведенный выше код показывает мою проблему, когда оба имеют одинаковый код, но один работает, а другой нет

Это дочерний компонент A: 

class Child_A extends Component {
    Child_A_Function = () => "Working";
    render = () => <h1>Child_A</h1>
}
export default Child_A;

ЭтоДочерний компонент B: 

import {Form} from "antd";

class Child_B extends Component {
    Child_B_Function = () => "Not Working";
    render = () => <h1>Child_B</h1>
}
export default Form.create()(Child_B);

Я пытался отладить this.Child_B.current

информация об отладке изображения

Я считаю, что он показывает Form.create () данных и удаления моих, я понимаю это, потому что Child_A работает нормально, и единственное отличие состоит в том, что он не имеет Form.create ()

1 Ответ

0 голосов
/ 08 февраля 2019

Это потому, что Form.create()() - это функция более высокого порядка, которая возвращает другой компонент.

, поэтому 

const DecoratedChild_B = Form.create()(Child_B);

У DecoratedChild_B может быть другая оболочка, и она становится такой: 

<wrapper ref={this.Child_B}>
   <Child_B/>
</wrapper>

Вот почему вы не получаете то, что хотите.

, чтобы получить ссылку на форму, вы должны использовать wrappedComponentRef 

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

, если выхотите что-то нестандартное, вы должны использовать другое имя для ref func

...