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

问题描述 投票:1回答:3

我有一个在一个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类,因为类本身需要在职业应用类中显示。

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>
javascript reactjs ecmascript-6
3个回答
2
投票

你需要打电话给drawer.handleDrawerOpen()

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

1
投票

正如您在导入中看到的那样,使用了两次,每个导入指向一个特定的实例。问题是当你调用drawer.handleDrawerOpen()时,组件没有被任何地方使用,所以你为什么会得到WEBPACK_IMPORTED_MODULE错误。您无法直接在父组件上访问子功能。你必须将它作为道具处理程序传递给editButton。另请参阅如何构建组件。这并不意味着如此复杂的任务。您可以看一下在演示和容器结构中构建组件。看看link

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


0
投票

试试吧

editButton() { 
  console.log("working edit"); 
  alert('You can drag a different field or occupation from the drawer at the left!'); 
  drawer.handleDrawerOpen(); 
}
© www.soinside.com 2019 - 2024. All rights reserved.