我有一个在一个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>
你需要打电话给drawer.handleDrawerOpen()
:
editButton() {
console.log("working edit");
alert('You can drag a different field or occupation from the drawer at the left!');
drawer.handleDrawerOpen();
}
正如您在导入中看到的那样,使用了两次,每个导入指向一个特定的实例。问题是当你调用drawer.handleDrawerOpen()
时,组件没有被任何地方使用,所以你为什么会得到WEBPACK_IMPORTED_MODULE错误。您无法直接在父组件上访问子功能。你必须将它作为道具处理程序传递给editButton
。另请参阅如何构建组件。这并不意味着如此复杂的任务。您可以看一下在演示和容器结构中构建组件。看看link。
如果您可以在codesandbox中添加完整组件,我们应该能够为您提供更多帮助。
试试吧
editButton() {
console.log("working edit");
alert('You can drag a different field or occupation from the drawer at the left!');
drawer.handleDrawerOpen();
}