javascript - 如何从不同类中的函数更改一个类的状态

Question

我有一个在可拖动目标类中创建的“编辑”按钮，它基本上是一个可编辑的 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();
}