[英]I want Popup to close, how do I do it?
When I press the AddAction
button from the Addaction
component, I want the popup to close. 当我从Addaction
组件按下AddAction
按钮时,我想要关闭弹出窗口。 ? ?
in fact, if I reach the onCloseAddActionModal
method in my component which is popup from AddAction component, my problem will be solved. 事实上,如果我在我的组件中到达onCloseAddActionModal
组件弹出的onCloseAddActionModal
方法,我的问题将得到解决。
AddAction Component: AddAction组件:
class AddAction extends React.Component {
constructor() {
super();
this.state = {
items: [{id:null, actiontype: null}],
error: null,
isLoaded: false,
selectId: null,
}
this.handleCheckChieldElement =
this.handleCheckChieldElement.bind(this); // set this, because you need get methods from CheckBox
}
componentDidMount = () => {
....
}
fetchAdd = (carid, offboardingactiontypeid) => {
...
}
handleCheckChieldElement = (id, e) => {
this.setState({selectId: id})
}
render() {
const items = this.state.items;
return (
<div>
<ul className="popupAddAction">
{
items.map((item) => {
return (
<li className="list" key={item.id}>
<input key={item.id} onClick=
{(e)
=>
this.handleCheckChieldElement(item.id,
e)} type="checkbox" />
{item.actiontype}
</li>
)
})
}
</ul>
<div className="popupAddAction--btn">
<button
onClick=
{ () =>
this.fetchAdd(this.props.id, this.state.selectId)}
className="btn btn-primary
popupAddAction--btn"
>
Add Action
</button>
</div>
</div>
);
}
}
export default AddAction;
Popup Component:
class OffBoarding extends Component {
this.state = {
openAddAction: false
};
onOpenAddActionModal = () => {
this.setState({ openAddAction: true });
};
onCloseAddActionModal = () => {
this.setState({ openAddAction: false });
};
render(){
return{
<div>
<Button className="btn btn-danger commentPlus" onClick=
{this.onOpenAddActionModal}> <FontAwesomeIcon icon=
{faPlus}/></Button>
</div>
{this.state.openAddAction ?
<div style={styles}>
<Modal open=
{this.state.openAddAction} onClose=
{this.onCloseAddActionModal} center>
<AddAction id=
{this.state.carid}
close=
{this.state.openAddAction}/>
</Modal>
</div> : null
}}
}}
You can simply pass the onCloseAddActionModal
method as prop
while rendering AddAction
component from OffBoarding
component. 您可以简单地将onCloseAddActionModal
方法作为prop
传递,同时从OffBoarding
组件渲染AddAction
组件。 And then, you can call that passed function as prop on "Add Action" button click ie 然后,您可以将“传递函数”作为“添加操作”按钮单击即调用
So in you popup component, change this: 所以在你的弹出组件中,改变这个:
<AddAction id=
{this.state.carid}
close={this.state.openAddAction}/>
to this (passing function as prop): 对此(传递函数作为道具):
<AddAction id=
{this.state.carid}
close={this.state.openAddAction}
closeDialog={this.onCloseAddActionModal}/>
And then in your AddAction
component, change this: 然后在您的AddAction
组件中,更改此:
<button
onClick={() =>
this.fetchAdd(this.props.id, this.state.selectId)}
className="btn btn-primary popupAddAction--btn">
Add Action
</button>
to this (calling function passed as prop in previous step): 对此(调用函数在上一步中作为prop传递):
<button
onClick=
{() =>{
this.fetchAdd(this.props.id, this.state.selectId);
this.props.closeDialog();
}}
className="btn btn-primary popupAddAction--btn">
Add Action
</button>
If openAddAction flag is true then only addaction component will display right. 如果openAddAction标志为true,则只有addaction组件才会显示正确。 Instead of open and close modal add below code to modal and in add action modal in fetch method set openAddAction to false. 而不是打开和关闭模态添加下面的代码到模态和添加动作模式在fetch方法中将openAddAction设置为false。 in your code you have communication from child to parent but you are trying to close modal based on child but modal exist in parent so make a communication to parent to child for that pass function through component 在您的代码中,您有从子级到父级的通信,但您尝试关闭基于子级的模式,但是父级中存在模态,因此通过组件与父级子级进行通信
<Modal isOpen = {this.state.openAddAction} center>
<AddAction id= {this.state.carid}
closeModa={this.onCloseAddActionModal} />
</Modal>
In addAction modal you have to add like this 在addAction模式中,你必须像这样添加
fetchAdd = (carid, offboardingactiontypeid) => {
this.setState({openAddAction:false});
this.props.onCloseAddActionModal();
}
Call this closeModal method in fetchAdd method 在fetchAdd方法中调用此closeModal方法
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.