React call 부트 스트랩 기능?

어떤 이유로 반응 부팅 스트랩을 사용할 수 없습니다. 그래서 나는 '모달'와 같은 부트 스트랩의 함수를 호출하고 싶지만 작동하지 보인다 그리고 난이 오류가있어 :React call 부트 스트랩 기능?

$('#my-modal').modal();

또는

modal is not a function

이 내가 componentDidMount()에서 재판을 무엇을

ReactDOM.findDOMNode(this.refs.myModal).modal();

또는

$(this.refs.myModal).modal();

내 모달 :

이

<div class="modal fade" id="my-modal" ref="myModal"> 
... 
</div>

나는 그 문제에 대한 해결책이 있는지 알고 싶습니다 또는 내가 '반응 - 부트 스트랩'과 같은 몇 가지 라이브러리를 사용하도록해야?

감사합니다.

업데이트

부트 스트랩 스크립트는 "모달"함수가 호출되기 전에, 내가 버튼을 추가 장착 할 수 있는지 :

이 버튼을 클릭

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#my-modal">Open Modal</button>

은 모달이 열립니다 . 이제는 onSubmit 함수를 사용하여 모달에 양식을 만들었습니다.

<div class="modal fade" id="my-modal" ref="myModal"> 
    <form onSubmit={this.testModal}>...</form> 
</div> 

testModal() { 
    // here i tried to call modal('hide') like i did above, but still get the error "modal is not a function" 
}

출처

2016-08-29 Trong Lam Phan

내 질문이있을 수 있습니다 바보입니다,하지만 부트 스트랩의 모든 js 코드를 포함하고 부트 스트랩 패키지를 다운로드 할 때 모달을 포함 했습니까? –

또한 fid를 사용하여 BootStrap 리소스를 적절한 위치에 포함 시켰습니까? 즉,로드시 $(). modal()이 즉시 호출되면 반응 파일 앞에 포함 된 부트 스트랩 파일입니까? – itcropper

@DimitriL. 그래, 내가 했어. 사실, 모든 사람들은 회전 목마, 버튼 등의 구성 요소를 사용합니다. 잘 작동합니다. –

이 문제를 해결하는 방법을 알아 냈습니다.

require('bootstrap') 
// or just require('bootstrap/js/modal'); require('bootstrap/js/transition');

: 첫째, 나는

import jQuery from 'jquery'; 
window.jQuery = jQuery;

그런 다음, 난 내 JS 파일에 부트 스트랩을 필요로 할 필요가 (내가 $ 작동하지 않은 이유를 알고, 아니면 충돌하지 않음) jQuery를 글로벌 만들 필요가

대신의 index.html을이 스크립트를 포함 : 내가 호출 할 수있어, 이제

<script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

을

jQuery('#my-modal').modal();

업데이트 : 생성자에 jQuery.noConflict(true)을 추가하지 않으면 문제가있을 수 있습니다.

출처

2016-08-30 11:08:16

React call 부트 스트랩 기능?

답변

관련 문제