Как передать 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>