无法使用HOC制作简单的弹出窗口
我真的是一个新的反应，我真的不明白我可能做错了什么。
我有这个JSX文件
import React from 'react'
const createPopup = (Body, Footer) => {
class Popup extends React.PureComponent {
render() {
return <div className='popup-react'>
<div className='popup-react-content'>
<div className='popup-react-body'>
<Body />
</div>
<div className='popup-react-footer'>
<Footer />
</div>
</div>
</div>
}
}
return Popup;
}
export default createPopup;
我想在另一个文件中使用它，如下所示：
class PopupBody extends React.PureComponent {
render() {
return <div>
<SomeDatepicker>
</div>;
}
}
class PopupFooter extends React.PureComponent {
render() {
return <div>
<button type="button">
<span>Accept</span>
</button>
<button type="button" onClick={this.props.closePopup}>
<span>Cancel</span>
</button>
</div>;
}
}
const Popup = createPopup(PopupBody, PopupFooter);
class SomeForm extends React.Component {
constructor(props) {
super(props);
this.state = {
showPopup: false
};
this.togglePopup = this.togglePopup.bind(this);
}
togglePopup() {
this.setState({
showPopup: !this.state.showPopup
});
}
render() {
return <div>
<SomeOtherInputs />
<If condition={this.state.showPopup}>
<Popup
title='Extend Due Date'
closePopup={this.togglePopup()} />
</If>
</div>;
}
}
我遵循CSS方法来创建本文中的弹出窗口：https://codepen.io/bastianalbers/pen/PWBYvz
按照回答中的建议做：反应。js：将一个组件包装到另一个组件中
试图理解以下文章：https://medium.com/@dan_abramov/milins-are-死-长-活-高阶-组件-94a0d2f9e750
但是我觉得我对反应的了解对我不利。我想在两个单独的函数中返回前两个类，而不是将它们声明为单独的类，但是我不能这样做，当我将道具传递给时，我也不能使ClosePopup函数工作。
共有2个答案
在SomeForm的render方法中，您正在调用this。切换弹出窗口，而不是将其作为回调传递。
试试看
<Popup
title='Extend Due Date'
closePopup={this.togglePopup}
/>
您正在调用事件处理程序属性上的事件处理程序。您需要传递函数引用。更改此项：
<Popup
title='Extend Due Date'
closePopup={this.togglePopup()} />
为此（删除选项）：
<Popup
title='Extend Due Date'
closePopup={this.togglePopup} />
所以当你想渲染弹出窗口时，你实际上是在隐藏它。
-
问题内容： 我是使用AngularJS的新手。我有4个名为“取消”，“拒绝”，“成功”和“删除”的按钮。如果我单击任何按钮，我想显示多条消息，即，如果我单击“取消”，则显示您单击“取消”按钮的消息，依此类推。 我从下面的链接进行跟踪，但是在此示例中未使用简单的警报且未使用任何控制器。 我想要一个 在ANGULARJS指令 示例中的 模态弹出框， 这样我才能理解。我尝试用谷歌搜索它，但是没有找到简单
-
问题内容： 我正在设计一个网页。当我们单击名为mail的div的内容时，如何显示一个包含标签电子邮件和文本框的弹出窗口？ 问题答案： 首先是CSS-调整它，但是您喜欢： 和JavaScript： 最后是html： 这是一个jsfiddle演示和实现。 根据情况，您可能需要通过ajax调用来加载弹出内容。最好避免这种情况，因为这可能会给用户带来更大的延迟，使他们无法观看内容。如果采用这种方法，您将在
-
我正试图打开一个弹出身份验证对话框的ftp页面。我正在使用Robot类的Keypress事件输入身份验证细节。但是在这里，如果焦点不在那个弹出窗口上，那么它在另一个处于焦点中的窗口中键入身份验证详细信息。由于这个弹出窗口不是web元素，我不能使用driver.switchto().window()，因为这里我需要传递windowhandle，我没有得到它。如果我可以点击驱动程序窗口，我的焦点将转移
-
HTML代码 现在，我正在使用selenium web Driver和Testng，使用Qooxdoo框架（它是javaScript框架）开发的web应用程序实现自动化。 在这方面，我已经实现了一些功能，但是有些弹出窗口是使用嵌套的 创建的，selenium弹出窗口处理程序无法处理这些功能。通过使用action类，我可以在文本区域写（通过下面提到selenium代码），这是在弹出（找到附件）中显示
-
我有一个tkinter GUI python代码，它为我的代码创建了一个GUI接口，在稍后的代码中使用了声音工具包（它也使用Tk，并使用root=Tk（）创建了一个实例）。因为，以前GUI应用程序的主循环已经在运行，所以每当调用snack函数时，就会弹出一个新的空默认tk窗口。由于这种情况经常发生，所以当代码执行时，屏幕上有数百个空tk窗口。我曾尝试使用多种方法关闭它们。毁灭，根。撤消、WM_删除