Как передать метод с 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)} />