Откройте модальное всплывающее окно в React - PullRequest
Новая
       19

Откройте модальное всплывающее окно в React

0 голосов
/ 03 апреля 2019

У меня есть эта кнопка в реакции: 

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

Возникла ошибка, всплывающее окно просто не открывается.

1 Ответ

0 голосов
/ 03 апреля 2019

Это потому, что openPopUp является обработчиком onclick, он не будет возвращать ничего для рендеринга. Для достижения цели просто используйте переменную состояния с начальным значением false и обновите это значение в методе openPopUp. Используйте этот bool для условного рендеринга компонента 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>
  )
}
...