react.js - 关于React modal 关闭的问题

问题描述

问 题

如图：onClick事件是props传进来还是自己封装在Alert组件中呢？按道理应该是通过props传进来，那又怎么关闭modal呢？

解决方案

那得看你的这个modal的开关是用什么控制的，总有一个是变化的，假如是class控制的，那么你在父组件写方法，通过state更改你的这个class就可以了。这没有什么可以纠结的吧

假如我就父组件写个状态this.state={show:false}

toShow(){this.setState({show:true})}
toHide(){this.setState({show:false})}

传递给子组件作为props

<Alert show={this.state.show} ok={this.toShow} cancel={this.toHide} />

在子组件里面

okClick(){ this.props.ok()}
cancelClick(){ this.props.cancel()}
....
className={this.props.show ? 'showClass' : 'hideClass'}
...
<button onClick={this.okClick}>ok</button>
<button onClick={this.okClick}>cancle</button>

这样应该就可以了

这篇关于react.js - 关于React modal 关闭的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！