在 React 中打开一个模态弹出窗口

Question

我有这个按钮在反应：

<button type="button" className="btn btn-primary" onClick={()=>openPopUp(object)}>
                                            Manage Permissions
</button>

当我点击按钮时，我想打开这个弹出窗口：

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">&times;</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>
)

}

为此，我这样做了，但弹出窗口打不开：

 let openPopUp=(object)=>{
    return   <PopUp object={object} cont={cont} onChange={handleChange} addPermission={addPermission} showDeleteButton={showDeleteButton}/>
}

有任何错误抛出，弹出窗口只是没有打开。

Answer 1

这是因为openPopUp 是一个onclick 处理程序，它不会返回任何要渲染的内容。要实现您的目标，只需使用初始值为 false 的状态变量，并在 openPopUp 方法中更新该值。使用该布尔值来条件渲染 PopUp 组件。

像这样：

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>
  )
}