React jQuery не распознает элемент как модальный Bootstrap - PullRequest
Новая
       6

React jQuery не распознает элемент как модальный Bootstrap

0 голосов
/ 22 мая 2018

Цель: для доступа к modal() коду Bootstrap Модала в React.

Существует приложение React с Bootstrap v4.

package.json: 

{
  ...
  "dependencies": {
    "bootstrap": "^4.1.1",
    "jquery": "^3.3.1",
    "popper.js": "^1.14.3",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-router-dom": "^4.2.2",
    "react-scripts-ts": "2.8.0"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  },
  "devDependencies": {
    "@types/jest": "^22.2.3",
    "@types/node": "^9.6.18",
    "@types/react": "^16.3.14",
    "@types/react-dom": "^16.0.5",
    "@types/react-router-dom": "^4.2.6"
  },
  ...
}

Теперь попытка получить modal() с помощью Chrome Dev Tools дает:

enter image description here

Так что кажетсякак:

  • Это может см. jQuery;
  • Это не может распознать foo Модальный как Bootstrap's modal();

Как заставить jQuery распознавать foo как modal()?

1 Ответ

0 голосов
/ 22 мая 2018

Не уверен, что я понимаю, что вы ожидаете.Но если вы хотите получить элемент в качестве модального объекта начальной загрузки, вы должны вызвать модальный режим как минимум один раз для инициализации.Пожалуйста, проверьте мой фрагмент кода ниже: 

$('.show-modal-btn').on('click', () => {
  let yourModalEl = $('#your-modal');
  console.log(yourModalEl.data('bs.modal')); // will be undefined
  yourModalEl.modal();
  console.log(yourModalEl.data('bs.modal')); // modal object
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://getbootstrap.com/docs/3.3/dist/js/bootstrap.min.js"></script>
<link href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="modal fade" id="your-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
    </div>
  </div>
</div>

<button class="show-modal-btn">Init modal</button>
...