Модальный элемент не скрывается [React & React - Bootstrap]
Я создал модальное окно с помощью React Bootstrap. Несмотря на то, что я использую функцию onHide, ничего не происходит. Вот мой модальный код:
<React.Fragment>
<Modal
{...this.props}
bsSize = "large"
aria-labelledby = "contained-modal-title-lg"
show = {this.state.showModal}
onHide = {this.handleHide}
>
<Modal.Body>
...
</Modal.Body>
<Modal.Footer>
<Button id = "closeModal" variant = "danger" onClick=
{this.handleHide.bind(this)}>
Save and close
</Button>
</Modal.Footer>
</Modal>
</React.Fragment>
Я передаю "шоу" от другого компонента, когда щелчок по какому-либо элементу происходит. onClick для этого элемента указывается как "showModal: true". Затем я передаю showModal другому компоненту, который отображает разные элементы в соответствии с выбранной опцией:
{this.state.addingState && (
<MyForm
{...this.state.item}
show = {this.state.showModal}
...
/>
)}
Наконец, в компоненте MyForm у меня есть функция, которая передает реквизиты компоненту с модальным окном:
createModalComponent {
...
let modalComponentProps= {
...
show: this.props.show,
}
Итак, так происходит "шоу". В моем файле с модальным компонентом у меня есть функция для обработки hide:
handleHide() {
this.setState({ showModal: false });
}
Теперь в этом компоненте showModal инициализируется в таком состоянии:
constructor(props) {
super(props);
this.state = {
showModal: this.props.show
};
this.handleHide = this.handleHide.bind(this);
}
Я много чего перепробовал. Другие переменные состояния, без инициализации showModal в состоянии и многое другое. При нажатии на кнопку или за пределами модального окна модальное окно по-прежнему отображается и не скрывается. Буду очень признателен за вашу помощь и / или предложения, как это исправить.
Итак, путь showModal: родительский компонент (где происходит this.state.addingState) -> компонент MyForm (где let modalComponentProps = {show: this.props.show, ... происходит) -> фактический модальный компонент
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
у вас есть 2 возможности: вы можете добавить метод своему родителю и передать метод + результат показа, подобный этому (используйте то же имя реквизита и метода для лучшей практики, чтобы вас не смущать):
Родитель
<Modal
{...this.props}
bsSize = "large"
aria-labelledby = "contained-modal-title-lg"
show = {this.state.showModal}
handleHide = {this.handleHide}
>
Ребенок
<MyForm
show = {this.props.showModal}
handleHide = {this.props.handleHide}
/>
Чтобы использовать модальное окно от родителя, вы можете вызвать его в дочернем элементе следующим образом: this.props.handleHide (true).
Или вы позволяете дочернему элементу управлять состоянием самостоятельно, чтобы вы поместили метод и состояние в дочерний элемент, а не в родительский (в зависимости от архитектуры).
Не рекомендуется добавлять реквизиты в дочернем состоянии. Кроме того, вы можете использовать функцию es6, чтобы избежать такой привязки:
handleHide = () => this.setState({ showModal: false });
Я не могу проголосовать за ваш ответ из-за моей нынешней репутации, но я не забуду сделать это позже;)
- Всегда используйте функции es6 в реакции и никогда больше не используйте привязку. - Да, добавьте метод handleHide () к родительскому объекту, тогда, когда вы его передадите, ваш ребенок сможет получить доступ в виде таких свойств, как this.props.handleHide. - Вы можете выбрать мой ответ как хороший, я думаю (не нужно голосовать), спасибо ^^
Это не сработало, или я сделал что-то не так :( В компоненте, в котором происходит щелчок и showModal: true, я создал такой метод: handleHide = () => this.setState ({showModal: false}); Затем я перехожу к следующий метод компонента вроде этого: onHide = {this.state.handleHide}. Внутри этого компонента я передаю метод фактическому модальному компоненту следующим образом: let SurveyFormItem = {onHide: this.props.onHide}. Также я инициализирую prop вот так: MyForm.propTypes {onHide: PropTypes.func} и MyForm.defaultProps {onHide: Function.prototype}.
Наконец, в модальном компоненте <Modal {... this.props} ... show = {this.state.showModal} onHide = {this.props.onHide}> и кнопка в этом модальном окне: <Button id = "closeModal" Вариант = "опасность" onClick = {this.props.onHide}> Сохранить и выйти </Button>
измените это: onHide = {this.state.handleHide} на это: onHide = {this.handleHide} Это компонент? : let SurveyFormItem = {onHide: this.props.onHide} Обычно нам не нужно добавлять defaultProps, вы можете удалить defaultProps и PropTypes (лично я не думаю, что это очень полезно)
Я изменил его, но по-прежнему ничего :( Кроме того, я заметил ошибку в консоли: «React не распознает опору showModal в элементе DOM.» Такая же ошибка появляется в свойстве bsSize в модальном режиме. Да, это мой компонент, который передает реквизиты в разные формы - в моем случае я пишу о случае с модальным компонентом, который содержит форму. Я написал для него другое имя в комментарии, извините. Я не могу его сейчас изменить, поэтому modalComponentProps === SurveyFormItem
Посмотрите метод shouldComponentUpdate
shouldComponentUpdate(nextProps) {
return !isEqual(this.props, nextProps);
}
Вы проверяете только свойства, но меняете состояние компонента. Исправьте метод или удалите его, и он будет работать
Это сработало! Но теперь у меня другая проблема - я не могу перезвонить в модальном режиме после того, как скрыл его.
Причина, по которой модальное окно ведет себя так, заключается в том, что компонент установлен, и вы устанавливаете начальное состояние в конструкторе из реквизита. Затем вы определяете, открыто модальное окно или нет, в зависимости от его состояния, и вот в чем проблема. Я подготовил песочницу с примером того, как можно решить что-то подобное codeandbox.io/s/…
Спасибо за ваш ответ! Итак, если я вас правильно понимаю (согласно первому варианту), я должен создать свой метод handleHide в родительском элементе, где также создается showModal? handleHide () {this.setState ({showModal: false}); }, а затем передайте этот метод как опору, как я сделал с showModal? После этого я могу использовать этот метод в моем модальном компоненте с помощью handleHide = {this.handleHide} и в кнопке this.handleHide (без привязки)?