Как передать дочерний объект родительскому при нажатии кнопки сохранения в родительском? - PullRequest
Новая
       209

Как передать дочерний объект родительскому при нажатии кнопки сохранения в родительском?

0 голосов
/ 14 июля 2020

У меня есть родительский компонент и несколько дочерних компонентов. Каждый дочерний компонент отвечает за получение данных и привязку к объекту, присутствующему локально.

Теперь в родительском компоненте у меня есть метод сохранения. Когда запускается событие сохранения щелчка, мне нужно собрать все объекты из дочернего элемента, сопоставить их с одним объектом и перейти к api. Может ли кто-нибудь помочь мне, как это сделать?

Ниже приведены некоторые методы, которые я пробовал, но не смог. Здесь я использовал useRef. 

// One of the child component 
const Questionnaire =  forwardRef((props,ref) => {
  useImperativeHandle(ref, () => ({
        getUserEnteredObjectRef() {
            return userEnteredData;
        }
    }));
});

//in my parent 

function HandleSaveRequest() {
     console.log('Save Request Command:');
     let qtnObj = questionnaireRef.current.getUserEnteredObjectRef(); // prints the object
     console.log(qtnObj); // displays the object from the child
     setSaveRequestObj({qtn:qtnObj}); // don't get assigned and the object will be empty. strange is when i click the save 2nd time i get the object assigned.
     axios.post(API, SaveRequestObj).then(res => {
       goToDashboard();
     }).catch(err => {
       console.log('Error while saving' + err.message);
     });
  }

Ссылка Вызов дочернего метода от родителя

1 Ответ

0 голосов
/ 14 июля 2020

См. ссылки do c:

Вам необходимо использовать current для доступа getUserEnteredObjectRef

let qtnObj = questionnaireRef.current.getUserEnteredObjectRef();

См. Демонстрацию здесь

...