Как передать this из одного компонента в другой в React?

Как передать метод с this из одного компонента в другой? Мне нужно из компонента Editor передать в компонент Modal метод save компонента Editor . Но при передаче this теряется и выдаёт в консоли undefined. Я привязывал контекст при помощи bind в конструкторе класса Editor, - не работает.

Editor:

import React, {Component} from 'react';
import Modal from '../modal';
import $ from 'jquery';

export default class Editor extends Component {
    constructor() {
        super();
      
        this.state = {
            pageList: [],
            newPageName: '',
            loading: true
        }
        this.save = this.save.bind(this); //не работает
    }

 render() { 
        const {pageList, loading} = this.state;
        const modal = true;
        return ( 
            <> 
            <ConfirmModal modal={modal} target={'modal-save'} method={this.save} />
            </>   
        )
    }

Modal:

import React from 'react';

const ConfirmModal = ({modal, target, method}) => {
    return (
    <div id={target} uk-modal={modal.toString()}>
        <div>
                <h2>Сохранение</h2>
                
                <p>Вы действительно хотите сохранить изменения?</p>
                
                <p>
                   <button>Отменить</button>
                   <button onClick=
                    {
                        () => method
                           (
                            // ******* Уведомление об успешном сохранении
                                ()=>{
                                          UIkit.notification({message: 'Успешно сохранено!', status: 'success'});
                                    },
                            // ******* Уведомление об ошибке
                                ()=>{
                                           UIkit.notification({message: 'Ошибка сохранения!', status: 'danger'})                                                       
                                    }
                            )
                     }>Сохранить</button>           
                </p>
        </div>
    </div>
    )
}

export default ConfirmModal;

Так тоже писал, не работает:<ConfirmModal modal={modal} target={'modal-save'} method={this.save.bind(this)} />


Ответы (1 шт):

Автор решения: Vasily

Определите сам метод save для того что бы Вам было что передавть:

import React, {
  Component
} from 'react';
import Modal from '../modal';
import $ from 'jquery';

export default class Editor extends Component {
  constructor() {
    super();

    this.state = {
      pageList: [],
      newPageName: '',
      loading: true
    }
    this.save = this.save.bind(this); // работает
  }
  
  save() {} // определите сам метод 

  render() {
    const {
      pageList,
      loading
    } = this.state;
    const modal = true;
    return ( <
      >
      <
      ConfirmModal modal = {
        modal
      }
      target = {
        'modal-save'
      }
      method = {
        this.save
      }
      /> <
      />   
    )
  }

  import React from 'react';

  const ConfirmModal = ({
    modal,
    target,
    method
  }) => {
    return ( <
      div id = {
        target
      }
      uk - modal = {
        modal.toString()
      } >
      <
      div >
      <
      h2 > Сохранение < /h2>

      <
      p > Вы действительно хотите сохранить изменения ? < /p>

      <
      p >
      <
      button > Отменить < /button> <
      button onClick = {
        () => method(
          // ******* Уведомление об успешном сохранении
          () => {
            UIkit.notification({
              message: 'Успешно сохранено!',
              status: 'success'
            });
          },
          // ******* Уведомление об ошибке
          () => {
            UIkit.notification({
              message: 'Ошибка сохранения!',
              status: 'danger'
            })
          }
        )
      } > Сохранить < /button>            <
      /p> <
      /div> <
      /div>
    )
  }

  export default ConfirmModal;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

→ Ссылка