Как скрыть модальное окно начальной загрузки с помощью React JSX
Я учусь реагировать, и я хочу закрыть модальное окно начальной загрузки после обратного вызова Post
Итак, в приведенном ниже коде я хочу скрыть модальное окно в методе hideModal, когда onClick = {() => postDocument.callApi(this.state.document, this.hideModal)} выполняет обратный вызов.
Как я могу это сделать?
import React, { Component } from "react";
import postDocument from "./../rest/PostDocument";
import fetchPersons from "./../rest/FetchPersons";
import PersonList from "./../components/PersonList";
import ShowDatePicker from "./../components/ShowDatePicker";
import moment from "moment";
class SaveDocument extends Component {
state = {
persons: [],
document: {
documentDate: moment(),
personFrom: {
id: ""
},
personTo: {
id: ""
},
comments: ""
}
};
hideModal = hideModalInfo => {
// How do I hide the modal here!
};
render() {
return (
<div
className = "modal fade"
id = "basicExampleModal"
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">
Save document
</h5>
<button
type = "button"
className = "close"
data-dismiss = "modal"
aria-label = "Close"
>
<span aria-hidden = "true">×</span>
</button>
</div>
<div className = "modal-footer">
<button
type = "button"
className = "btn btn-primary"
onClick = {() => postDocument.callApi(this.state.document, this.hideModal)}
>
Save changes
</button>
</div>
</div>
</div>
</div>
);
}
}
export default SaveDocument;
Ответы 3
вы должны привязать этот метод. onClick = {this.handleClick}
class SaveDocument extends Component {
constructor(props){
super(props);
state = { ... }
//This binding is necessary to make `this` work in the callback
this.hideModal = this.hideModal.bind(this);
}
render(){
return (<button
type = "button"
onClick = {this.hideModal)}
>)
}
};
Кроме того, у меня есть базовый пример работы:
https://codepen.io/ene_salinas/pen/yRGMpG
ReactModal.setAppElement('#main');
class ExampleApp extends React.Component {
constructor () {
super();
this.state = {
showModal: false
};
this.handleOpenModal = this.handleOpenModal.bind(this);
this.handleCloseModal = this.handleCloseModal.bind(this);
}
handleOpenModal () {
this.setState({ showModal: true });
}
handleCloseModal () {
this.setState({ showModal: false });
}
render () {
return (
<div>
<button onClick = {this.handleOpenModal}>Trigger Modal</button>
<ReactModal
isOpen = {this.state.showModal}
contentLabel = "onRequestClose Example"
onRequestClose = {this.handleCloseModal}
className = "Modal"
overlayClassName = "Overlay"
>
<p>Modal text!</p>
<button onClick = {this.handleCloseModal}>Close Modal</button>
</ReactModal>
</div>
);
}
}
const props = {};
ReactDOM.render(<ExampleApp {...props} />, document.getElementById('main'))
В вашем коде (если у вас есть jquery):
constructor(){
this.state = { hideModal = true }
}
hideModal() {
this.state.hideModal = true
//i dont recommend, i prefer use the state
$("#modal").hide()
};
showModal() {
this.state.hideModal = false
//i dont recommend, i prefer use the state
$("#modal").show()
};
render(){
<button value = "open modal" onClick = {showModal} />
//div modal
<div class = {this.state.hideModal ? 'hide' : 'show'}>
<button value = "close modal" onClick = {hideModal} />
</div>
}
при нажатии кнопки закрытия необходимо изменить состояние, при этом состояние должно быть связано со стилем или отображением класса: нет
Кнопка закрытия уже работает с загрузочным файлом data-dismiss = "modal". Я хочу закрыть его в обратном вызове; то есть метод jsx
просто удалите атрибут data-dismiss
@YasinMustafa, пожалуйста, проверьте, я редактировал ответ
Я хочу закрыть, нажав кнопку «закрыть» -> уже работает из коробки !!! Я также хочу закрыть обратный вызов с помощью JSX ... это мой вопрос.
добавление класса hide не закрывает его должным образом. Мне нужно сделать что-то вроде jquery $ {# basicExampleModal) .hide () или вызвать data-dismiss в модальном окне ... но я не знаю, как это сделать в JSX
если в вашем проекте есть jquery, сделайте это, $ ("# modal"). hide (), важно то, что метод привязан к конструктору, как в примере выше.
bootstrap имеет функции на основе jquery, поэтому
1. если вы используете здесь jquery, используйте этот
$("#basicExampleModal").modal("hide");
2. Или мы можем использовать data-dismiss = "модальный" для этой кнопки
<button type = "button" class = "btn btn-secondary" data-dismiss = "modal">Close</button>
Вы можете импортировать jquery и вызвать метод Bootstrap modal("hide") ...
import $ from "jquery";
...
hideModal = hideModalInfo => {
$("#myModal").modal("hide");
};
но вы правильно используете ReactModal ?? Я использую базовую загрузку. Есть ли способ закрыть его, когда это модальное окно начальной загрузки?