Мне нужно открыть / закрыть модальное окно, например
$ (элемент) .modal ('показать')
Как это сделать?
Мне нужно открыть / закрыть модальное окно, например
$ (элемент) .modal ('показать')
Как это сделать?
Вам нужен настраиваемый модальный триггер, который использует OverlayMixin
и позволяет вам самостоятельно управлять состоянием модального окна. Вы можете управлять отображением модального окна с помощью this.setState({isModalOpen: true})
для достижения эквивалента того, что вы просили в своем сообщении в примере ниже. Следующий код взят с веб-сайта response-bootstrap (http://react-bootstrap.github.io/components.html#modals):
const CustomModalTrigger = React.createClass({
mixins: [OverlayMixin],
getInitialState() {
return {
isModalOpen: false
};
},
handleToggle() {
this.setState({
isModalOpen: !this.state.isModalOpen
});
},
render() {
return (
<Button onClick={this.handleToggle} bsStyle='primary'>Launch</Button>
);
},
// This is called by the `OverlayMixin` when this component
// is mounted or updated and the return value is appended to the body.
renderOverlay() {
if (!this.state.isModalOpen) {
return <span/>;
}
return (
<Modal bsStyle='primary' title='Modal heading' onRequestHide={this.handleToggle}>
<div className='modal-body'>
This modal is controlled by our custom trigger component.
</div>
<div className='modal-footer'>
<Button onClick={this.handleToggle}>Close</Button>
</div>
</Modal>
);
}
});
React.render(<CustomModalTrigger />, mountNode);
ОБНОВЛЕНИЕ (4 августа 2015 г.)
В новейшей версии React-Bootstrap отображение модального окна или нет контролируется атрибутом show
, который передается модальному окну. OverlayMixin
больше не требуется для управления модальным состоянием. Управление состоянием модального окна по-прежнему осуществляется через setState
, в этом примере через this.setState({ showModal: true })
. Следующее основано на примере на веб-сайте React-Bootstrap:
const ControlledModalExample = React.createClass({
getInitialState(){
return { showModal: false };
},
close(){
this.setState({ showModal: false });
},
open(){
this.setState({ showModal: true });
},
render() {
return (
<div>
<Button onClick={this.open}>
Launch modal
</Button>
<Modal show={this.state.showModal} onHide={this.close}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>
<div>Modal content here </div>
</Modal.Body>
<Modal.Footer>
<Button onClick={this.close}>Close</Button>
</Modal.Footer>
</Modal>
</div>
);
}
});
refs
- person vaughan; 28.05.2015
У вашего модального окна будет свойство show
и свойство onHide
, чтобы определить, когда оно будет отображаться. Например.:
<Modal show={this.state.showModal} onHide={this.close}>
Функция onHide
просто изменяет свойство состояния showModal
. Ваше модальное окно отображается / скрывается в зависимости от состояния родителя:
close(){
this.setState({ showModal: false });
}
Если вы хотите закрыть модальное окно из самого модального окна, вы можете запустить функцию onHide
, определенную в родительском окне через props
. Например, это кнопка где-то внутри модального окна, закрывающего его:
<button type="button" className="close" onClick={this.props.onHide}>
<span>×</span>
</button>
Вот скрипка, имитирующая этот рабочий процесс.
Вы можете сделать это с помощью хуков React. (Включено в React 16.8)
import React, { useState } from "react";
import { Modal, Button } from "react-bootstrap";
const ComponentWithModal = props => {
const [isModalOpen, setModalStatus] = useState(false);
return (
<div>
<div>I am a Bootstrap Modal</div>
<Button onClick={() => setModalStatus(true)}>Show Modal</Button>
<div>
<Modal
className="modal-container"
show={isModalOpen}
onHide={() => setModalStatus(false)}
>
<Modal.Header closeButton>
<Modal.Title>Modal title</Modal.Title>
</Modal.Header>
<Modal.Body>Modal content here</Modal.Body>
<Modal.Footer>
<Button onClick={() => setModalStatus(false)}>Close</Button>
</Modal.Footer>
</Modal>
</div>
</div>
);
};
export default ComponentWithModal;
Открывать и закрывать модальное окно response-bootstrap программно / динамически из состояния:
Здесь я использовал синтаксис компонента класса синтаксиса ES6.
import React, { Component, PropTypes } from 'react';
import { Modal, Button } from 'react-bootstrap';
import './GenericModal.scss';
class GenericModal extends Component {
constructor(props, context) {
super(props, context);
this.state = {
showModal: false
};
this.open = this.open.bind(this);
this.close = this.close.bind(this);
}
open() {
this.setState({showModal: true});
}
close() {
this.setState({showModal: false});
}
render() {
return(
<div>
<div>I am a Bootstrap Modal</div>
<Button onClick={this.open}>Show Modal</Button>
<div>
<Modal className="modal-container"
show={this.state.showModal}
onHide={this.close}
animation={true}
bsSize="small">
<Modal.Header closeButton>
<Modal.Title>Modal title</Modal.Title>
</Modal.Header>
<Modal.Body>
One of fine body.........
</Modal.Body>
<Modal.Footer>
<Button onClick={this.close}>Close</Button>
<Button bsStyle="primary">Save changes</Button>
</Modal.Footer>
</Modal>
</div>
</div>
);
}
}
export default GenericModal;