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';

这就是它在render函数中的呈现方式。

<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。还可以看看如何构造组件。这并不意味着那么复杂的任务。您可以看一下在表示性和容器结构中构造组件的方式。看看link。

如果您可以在codesandbox中添加完整的组件，我们应该能够为您提供更多帮助。

Answer 3

尝试

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

如何从另一个类中的函数更改一个类的状态

3 个答案: