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

Question

[konstantinst13]

Мне нужно из компонента 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;

Comments

[konstantinst13]

Так тоже писал, не работает

<ConfirmModal modal={modal} target={'modal-save'} method={this.save.bind(this)} />

Answer 1

[Владимир Проскурин]

Не совсем понятно, что значит не работает? Я не вижу реализацию метода save. И точно this это undefined а не сам метод? Можете вместо bind сразу определять метод save как стрелочную функцию, тогда проблем с this не будет.
По текущему коду сложно понять, в чем у вас проблема. То, что вы делаете, это стандартная задача - передача функции в компонент https://ru.reactjs.org/docs/faq-functions.html