javascript - How to open bootstrap modal in react component? - Stack Overflow

admin管理员组

文章数量:1307608

Have a react ponent. Need to open bootstrap modal on page load. Tried using jQuery and simple javascript but with no success.

React Component:

import React, { Component } from 'react'
import $ from 'jquery'

class Login extends Component {
  ponentDidMount() {
    // here I want to open modal
  }

  render() {
    return (
      <div className="modal fade WeleModal" id="WeleModal" tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div className="modal-dialog modal-dialog-centered" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <div className="camera-box">
                <img alt="" src="/img/yellow-logo.svg"/>
                <h5 className="modal-title" id="exampleModalLabel">Wele to the Cozy App!</h5>
              </div>                             
            </div>
            <div className="modal-body">
              <p className="text-center">On the following screens weʼll ask you to register the Cozys in your home & adjust your temperature settings. Youʼll need the following information:</p>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

Have a react ponent. Need to open bootstrap modal on page load. Tried using jQuery and simple javascript but with no success.

React Component:

import React, { Component } from 'react'
import $ from 'jquery'

class Login extends Component {
  ponentDidMount() {
    // here I want to open modal
  }

  render() {
    return (
      <div className="modal fade WeleModal" id="WeleModal" tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div className="modal-dialog modal-dialog-centered" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <div className="camera-box">
                <img alt="" src="/img/yellow-logo.svg"/>
                <h5 className="modal-title" id="exampleModalLabel">Wele to the Cozy App!</h5>
              </div>                             
            </div>
            <div className="modal-body">
              <p className="text-center">On the following screens weʼll ask you to register the Cozys in your home & adjust your temperature settings. Youʼll need the following information:</p>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

• javascript
• jquery
• reactjs
• bootstrap-modal
• react-bootstrap4-modal

Share Improve this question Follow edited May 28, 2019 at 18:40 Sujit Y. Kulkarni 1,38644 gold badges2424 silver badges4040 bronze badges asked Oct 11, 2018 at 6:03 Dark KnightDark Knight 1,09366 gold badges2626 silver badges5050 bronze badges 5

• You don't need jquery. You can display the modal using properties in the state. – jagzviruz Commented Oct 11, 2018 at 6:05
• Could you please post an example! – Dark Knight Commented Oct 11, 2018 at 6:06
• use this react-bootstrap.github.io/ponents/modal – Just code Commented Oct 11, 2018 at 6:07
• Check this stackoverflow./questions/28241912/… – Hemadri Dasari Commented Oct 11, 2018 at 6:50
• Possible duplicate of Bootstrap modal in React.js – Hemadri Dasari Commented Oct 11, 2018 at 6:50

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Have a look at this codepen which shows how you can bine Bootstrap Classes with React without needing jQuery

toggleModal = () => this.setState({
              showLogin: !this.state.showLogin
          })

first of all, DO NOT USE JQUERY IN REACT. you just need to set an state for show or hide modal. that's it.

// In functional ponents:
<div onClick={setState(true)}
// In class ponents:
<div onClick={this.setState({showModal: true})}

You don't need Jquery for this purpose, all you need to do is to play with bootstrap css classes, which in turn show or hide the modal.

You can see an example in the below link

Link

Include the Js cdn in your public folder index.html https://getbootstrap./docs/4.0/getting-started/introduction/

Then call the bootstrap modal as regular, https://getbootstrap./docs/4.0/ponents/modal/

本文标签： javascriptHow to open bootstrap modal in react componentStack Overflow