Как изменить состояние одного класса из функции в другом классе

Question

У меня есть кнопка «Редактировать», которая создается внутри класса Draggable-target, который по сути является редактируемым блоком div. Когда эта кнопка нажата, она должна изменить состояние класса ящика, сделав его «открытым», вызвав функцию handleDrawerOpen () в классе ящика. Какие-нибудь решения относительно того, как эффективно изменить состояние ящика?

Я пробовал сделать из ящика постоянный объект и вызвать функцию объекта, но по какой-то причине это не работает.

Это состояние и функция handleDrawerOpen / Close в классе временного ящика, а также способ его экспорта для использования в других классах.

state = {
    open: false,
  };

  handleDrawerOpen = () => {
    this.setState({ open: true });
  };

  handleDrawerClose = () => {
    this.setState({ open: false });
  };

[rest of code here]

TemporaryDrawer.propTypes = {
  classes: PropTypes.object.isRequired,
};

const drawer = new TemporaryDrawer();
export default withStyles(styles)(TemporaryDrawer);

Это код кнопки редактирования в другом классе. TemporaryDrawer также импортируется в этот класс.

editButton() {
      console.log("working edit");
      alert('You can drag a different field or occupation from the drawer at the left!');
      drawer.handleDrawerOpen;
    }

Я не получаю никаких ошибок, но ящик не открывается, когда я нажимаю кнопку редактирования.

Вот так я импортирую временный рисователь в класс, где вызывается кнопка. Я импортирую как объект «ящик», так и сам класс TemporaryDrawer, поскольку сам класс должен отображаться внутри класса career-app.

import drawer from './TemporaryDrawer.js';
import TemporaryDrawer from './TemporaryDrawer.js';

И вот как это отображается в функции рендеринга.

<div className="careerApp">
<TemporaryDrawer handleDrop={(target, type, name) => this.handleDrop(target, type, name)}/>
[There's a bunch of code here]
</div>

Answer 1

Вам нужно позвонить drawer.handleDrawerOpen():

editButton() {
    console.log("working edit");
    alert('You can drag a different field or occupation from the drawer at the left!');
    drawer.handleDrawerOpen();
}

Answer 2

Как видите, при импорте используются дважды, и каждый импорт указывает на конкретный экземпляр. Проблема в том, что когда вы звоните drawer.handleDrawerOpen(), компонент не используется где-либо, поэтому вы получаете сообщение об ошибке WEBPACK_IMPORTED_MODULE. Вы не можете получить доступ к дочерней функции непосредственно в родительском компоненте. Вам нужно будет передать его как обработчик реквизитов editButton. Также взгляните на то, как вы структурируете свои компоненты. Это не должно быть такой сложной задачей. Вы можете взглянуть на структурирование ваших компонентов в структуре представления и контейнера. Посмотрите на ссылку .

Если вы сможете добавить полные компоненты в коды и коробки, мы сможем помочь вам больше.

Answer 3

Попробуйте с

editButton() { 
  console.log("working edit"); 
  alert('You can drag a different field or occupation from the drawer at the left!'); 
  drawer.handleDrawerOpen(); 
}