Сложность при попытке вызвать метод от родителя к потомку в React, когда ребенок является компонентом формы AntD

Question

У меня есть компонент под названием CollectionsPage, где я пытаюсь создать ссылку на дочерний элемент и вызвать один из его методов через функцию onClick.

Причина этого в том, что я хочу, чтобы дочерний процесс обрабатывал свое собственное состояние, а не передавал все это из родительского компонента. Дочерний объект называется CollectionsCreateForm, и в настоящее время у меня есть только функция test. Я пытался вызвать функцию, но она никогда не запускалась - однако, когда я попробовал ту же функцию из другого компонента, это сработало. Есть ли что-то в форме формы внутри AntD, что вызывает у меня трудности?

Я попытался изменить ссылку, и я также передал 'wrappedComponentRef' child, чтобы убедиться, что это не проблема. Мне нужно иметь возможность доступа к форме у ребенка, но AntD говорит, что ее нужно передать как реквизиты от родителя. Я хотел бы поместить метод onCreate в дочерний процесс, поэтому модал обрабатывает все, что должен, без помощи родителя, но я считаю, что ему нужна ссылка на formRef.

Я сделал пример моей проблемы с песочницей. Здесь - ссылка.

Answer 1

Когда вы используете antd для создания формы, вы в основном используете компонент высшего порядка (Form.create(Component)), который окутывает ваш component с помощью метода test внутри.

this.testRef.current будет относиться к вашему компоненту высшего порядка в основном к классу Form.create, а не к вашему собственному компоненту.

Вы можете использовать wrappedComponentRef , чтобы получить ссылку на свой собственный компонент:

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

, а затем просто позвонить this.formRef.test();

Вотрабочий пример: https://codesandbox.io/s/n34ppwnq9j