Bootstrap modal en React.js

Solución:

Recientemente estaba buscando una buena solución para esto sin agregar React-Bootstrap a mi proyecto (ya que Bootstrap 4 está a punto de ser lanzado).

Esta es mi solución: https://jsfiddle.net/16j1se1q/1/

let Modal = React.createClass({
    componentDidMount(){
        $(this.getDOMNode()).modal('show');
        $(this.getDOMNode()).on('hidden.bs.modal', this.props.handleHideModal);
    },
    render(){
        return (
          <div className="modal fade">
            <div className="modal-dialog">
              <div className="modal-content">
                <div className="modal-header">
                  <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <h4 className="modal-title">Modal title</h4>
                </div>
                <div className="modal-body">
                  <p>One fine body&hellip;</p>
                </div>
                <div className="modal-footer">
                  <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
                  <button type="button" className="btn btn-primary">Save changes</button>
                </div>
              </div>
            </div>
          </div>
        )
    },
    propTypes:{
        handleHideModal: React.PropTypes.func.isRequired
    }
});



let App = React.createClass({
    getInitialState(){
        return {view: {showModal: false}}
    },
    handleHideModal(){
        this.setState({view: {showModal: false}})
    },
    handleShowModal(){
        this.setState({view: {showModal: true}})
    },
    render(){
    return(
        <div className="row">
            <button className="btn btn-default btn-block" onClick={this.handleShowModal}>Open Modal</button>
            {this.state.view.showModal ? <Modal handleHideModal={this.handleHideModal}/> : null}
        </div>
    );
  }
});

React.render(
   <App />,
    document.getElementById('container')
);

La idea principal es solo renderizar el componente Modal en React DOM cuando se va a mostrar (en la función de renderizado de los componentes de la aplicación). Mantengo un estado de ‘vista’ que indica si el Modal se muestra actualmente o no.

Las devoluciones de llamada ‘componentDidMount’ y ‘componentWillUnmount’ ocultan o muestran el modal (una vez que se procesa en React DOM) a través de las funciones de JavaScript de Bootstrap.

Creo que esta solución sigue muy bien el espíritu de React, ¡pero las sugerencias son bienvenidas!

Puede usar React-Bootstrap (https://react-bootstrap.github.io/components/modal). Hay un ejemplo de modales en ese enlace. Una vez que haya cargado react-bootstrap, el componente modal se puede usar como un componente de reacción:

var Modal = ReactBootstrap.Modal;

luego se puede utilizar como un componente de reacción como
<Modal/>.

Para Bootstrap 4, hay react-strap (https://reactstrap.github.io). React-Bootstrap solo es compatible con Bootstrap 3.

getDOMNode() es obsoleto. En su lugar use ref para acceder al elemento DOM. Aquí está el componente modal de trabajo (Bootstrap 4). Decida si mostrar o no el componente modal en el componente principal.

Ejemplo: https://jsfiddle.net/sqfhkdcy/

class Modal extends Component {
    constructor(props) {
        super(props);
    }
    componentDidMount() {
        $(this.modal).modal('show');
        $(this.modal).on('hidden.bs.modal', handleModalCloseClick);
    }
    render() {
        return (
            <div>
                <div className="modal fade" ref={modal=> this.modal = modal} id="exampleModal" tabIndex="-1" role="dialog" aria- labelledby="exampleModalLabel" aria-hidden="true">
                    <div className="modal-dialog" role="document">
                        <div className="modal-content">
                            <div className="modal-header">
                                <h5 className="modal-title" id="exampleModalLabel">Modal title
                                </h5>
                                <button type="button" className="close" data- dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div className="modal-body">
                                ...
                            </div>
                            <div className="modal-footer">
                                <button type="button" className="btn btn-secondary" data- dismiss="modal">Close</button>
                                <button type="button" className="btn btn-primary">Save changes</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

Editar:

Aquí están las importaciones necesarias para que funcione:

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

---

---

Utiliza Nuestro Buscador