[英]Open a modal popUp in React
I have this button in react: 我有这个按钮反应:
<button type="button" className="btn btn-primary" onClick={()=>openPopUp(object)}>
Manage Permissions
</button>
and when I click the buton I want to open this popUp: 当我点击按钮时我想打开这个popUp:
PopUp.js: PopUp.js:
const PopUp = (props) => {
return (
<div className="modal fade" tabIndex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">{props.object.name}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{props.object.permissions.map((permission) => {
return (
<li key={permission.code}>
{permission.name}
{props.showDeleteButton(permission.id, props.object.name)}
<p> </p>
</li>
)
})}
<form onSubmit={e => props.addPermission(e, props.object)}>
<label>
Insert a permission:
<input type="text" value={props.object.value} onChange={props.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
</div>
</div>
</div>
</div>
)
} }
To do that, I did this, but the pop up wont open: 要做到这一点,我做了这个,但弹出窗口不会打开:
let openPopUp=(object)=>{
return <PopUp object={object} cont={cont} onChange={handleChange} addPermission={addPermission} showDeleteButton={showDeleteButton}/>
}
There is any error thrown, the popUp just doesn´t open. 抛出任何错误,popUp都没有打开。
It is because openPopUp
is a onclick handler, it will not return anything to render. 这是因为openPopUp
是一个onclick处理程序,它不会返回任何要呈现的内容。 To achieve your goal, simply use a state variable with initial value as false, and update that value in openPopUp
method. 要实现您的目标,只需使用初始值为false的状态变量,并在openPopUp
方法中更新该值。 Use that bool for conditional rendering of PopUp component. 使用该bool进行PopUp组件的条件渲染。
Like this: 像这样:
constructor() {
super();
this.state = {
openPopUp: false,
object: null
}
}
openPopUp(object) {
this.setState({
openPopUp: true,
object: object
})
}
render() {
return (
<div>
....
{this.state.openPopUp &&
<PopUp object={this.state.object} cont={cont} onChange={handleChange} addPermission={addPermission} showDeleteButton={showDeleteButton} />}
....
</div>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.