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

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

1 个答案: