1

Как передать метод с 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)} />
Vasily
  • 11,547
Alexei
  • 371

1 Answers1

-1

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

constructor() {
    super()    
    this.state = {
      pageList: [],
      newPageName: "",
      loading: true
    }
    this.save = this.save.bind(this) // работает
}

save() {}  // определите сам метод
Vasily
  • 11,547