Как использовать функциональность переключения данных в ReactJS с помощью Bootstrap Modal? - PullRequest
Новая
       21

Как использовать функциональность переключения данных в ReactJS с помощью Bootstrap Modal?

0 голосов
/ 25 декабря 2018

Я не получаю никакого ответа, когда нажимаю кнопку «Добавить новую услугу» на моей странице обслуживания.Я использовал Data-toggle на кнопке «Добавить новую услугу», но это не вызов модального класса, который я хочу вызвать. Он отлично работает на странице HTML, но не работает на странице ReactJS. 

render() {

        return (    <html>
                    <form> 
                      <div class="row">
                        <div class="col-md-4"></div>
                        <div class="col-xs-6 col-md-3 search">
                          <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search" id="txtSearch"/>
                            <div class="input-group-btn">
                              <button class="btn btn-primary" type="submit">
                                Search
                              </button>
                            </div>
                          </div>
                        </div>
                     <div class="col-xs-12 col-md-4 search">
                        <button type="button" class="btn btn-outline-primary"  data-toggle="modal" data-target="#exampleModalCenter">Add New Service</button>
                        </div>

                        <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                          <div class="modal-dialog modal-dialog-centered" role="document">
                            <div class="modal-content">
                              <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                  <span aria-hidden="true">&times;</span>
                                </button>
                              </div>
                              <div class="modal-body">

                              </div>
                              <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Save changes</button>
                              </div>
                            </div>
                          </div>
                        </div>


                      </div>

                    </form>
                    </html>
            );
    }
...