时间戳

首页 > 解决方案 > 模态不会出现在反应中

reactjs - 模态不会出现在反应中

问题描述

我正在使用 react-bootstrap，并且我在组件函数中有一个 Modal，如下所示：

// stateless function component
function ServiceModal(props) {
    return (
        <Modal>
            <Modal.Dialog>
                <Modal.Header>
                    <Modal.Title>{props.item.name}</Modal.Title>
                </Modal.Header>

                <Modal.Body>
                    <p>{props.item.id}</p>
                    <p>{props.item.name}</p>
                    <p>{props.item.description}</p>
                </Modal.Body>

                <Modal.Footer>
                    <Button variant="secondary">Close</Button>
                </Modal.Footer>
            </Modal.Dialog>
        </Modal>
    );
}

这个模态没有出现。内容不显示，甚至覆盖。这是我如何调用它来渲染它：

class Service extends Component {

renderServiceModal(service) {
    return (
        <ServiceModal
            item={service}
        />
    );
}

render() {
    return (
      <div className="container content">
          <div className="row">
              <div className="col-6">
                  <form>
                    <div className="form-group">
                        <label htmlFor="nom">Name</label>
                        <input name="name" ref="name" type="text" className="form-control" id="name" placeholder="Name"
                               onChange={(value) => this.onChange(value)} />
                    </div>
                    <div className="row">
                      <div className="col-sm-3">
                          <button onClick={this.postService.bind(this)} type="submit" className="btn btn-primary btn-block">Add</button>
                      </div>
                    </div>
                  </form>
              </div>
              <div className="col-6">
                  <ul className="list-group">
                      {this.state.services.map(service =>
                          <li onClick={() => { this.readOneService(service.id) }} className="list-group-item" key={service.id}>{service.nom}
                                <div className="btn-group btn-group-sm float-right" role="group">
                                    <button type="button" className="btn btn-primary"
                                            onClick={() => this.updateService(service.id)}>Update
                                    </button>
                                    <button type="button" className="btn btn-danger"
                                            onClick={() => this.deleteService(service.id)}>Delete
                                    </button>
                                </div>
                            </li>
                      )}
                  </ul>
              </div>
          </div>
      </div>
    );
}

什么都没有显示...有什么帮助吗？

编辑：在我的主组件中使用渲染内的代码更新问题

标签： reactjs

解决方案

默认情况下，模式是隐藏的：https ://react-bootstrap.github.io/components/modal/#modals-props

您需要将该show属性设置为 true: ( <Modal show={true}>)

完整代码

// stateless function component
function ServiceModal(props) {
    return (
        <Modal show={true}>
            <Modal.Dialog>
                <Modal.Header>
                    <Modal.Title>{props.item.name}</Modal.Title>
                </Modal.Header>

                <Modal.Body>
                    <p>{props.item.id}</p>
                    <p>{props.item.name}</p>
                    <p>{props.item.description}</p>
                </Modal.Body>

                <Modal.Footer>
                    <Button variant="secondary">Close</Button>
                </Modal.Footer>
            </Modal.Dialog>
        </Modal>
    );
}

推荐阅读