React + Semantic-UI: использование форм внутри UI MODAL
в простом старом семантическом интерфейсе без React я смог поместить форму внутри модального без проблем.
С версией Semantic-UI + React я могу отображать форму внутри модального, но она не работает так, как я ожидал бы.
например, после модального шоу и форма внутри модального также отображается. Если я начну вводить в поле ввода, я получу эту ошибку:
Error: Invariant Violation: findComponentRoot(..., .1.1.1.0.4.0.0.1): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID ``.
и в связи с эта ошибка, другой код реакции, который я использую для ввода, не работает должным образом.
Это самая простая версия кода, которая демонстрирует проблему:
ConfirmEdit = React.createClass({
render(){
return (
<div className="ui modal editform">
<form className="ui form">
<div className="field">
<label>Name</label>
<input name="name" type="text" placeholder="Name">
</input>
</div>
</form>
</div>
);
}
});
внутри компонента, где я добавляю выше компонент, я убедился, чтобы вызвать его:
$('.ui.modal.editform').modal('show');
как уже упоминалось выше. Он отображается нормально, но он не работает нормально из-за инвариантного нарушения.
как мне обойти это и заставить его работать?
6 ответов
вы хотите инициализировать модальный в componentDidMount с опцией detachable = false.
$('.ui.modal').modal({detachable: false});
это предотвратит перемещение модального внутри глобального объекта затемнения, а DOM по-прежнему будет принадлежать и управляться React. Другие варианты документированы здесь.
Я создал пример JSFiddle для тестирования.
Ok...Жаль, что я не подумал об этом раньше....
я решил проанализировать DOM и напрямую манипулировать DOM для решения.
Я пытался найти другое более "изящное" менее хакерское решение, но ничего не получалось. Я попробовал модальный материал-UI для интеграции с семантическими формами UI, но обнаружил, что он не прокручивается, если содержимое модального длинное, как форма и т. д......
Я также пытался полагаться на API Semantic-UI (The доступные настройки и т. д. но все они имеют какие-то отрицательные побочные эффекты.
Так вот что я сделал, чтобы найти решение. Я посмотрел на HTML, полученный при модальном отображении, и посмотрел на его положение в DOM.
как оказалось, когда диммер активен, Semantic-UI отображает div с этим классом для диммера
ui dimmer modals page transition visible active
я обнаружил, что этот div-брат, а не ребенок другого div с классом
ui fluid container pushable
что содержит все остальное мое содержимое.
то, что я сделал, было каждый раз, когда я запускаю свой модальный, я немедленно вызываю код, чтобы сделать модальный дочерним для этого контейнера для моего другого контента... Таким образом, мой модальный не покрывается диммером.
showModal: function() {
$('.ui.modal.editform').modal('show');
//$('.ui.dimmer.modals').dimmer('hide');
//$('.ui.dimmer.modals').after('.pusher');
// $('.ui.dimmer.modals').appendTo('#render-target');
$('.ui.dimmer.modals').appendTo('.ui.fluid.container.pushable');
}
обобщить: 1.) С моим опытом отображения формы внутри модального с помощью Semantic-UI с React, если вы не установите съемное свойство модального UI семантического UI, это ошибки с инвариантным нарушением и т. д. Этот решение установить съемный ложным.
2.) После этого вы можете столкнуться с проблемой диммера модального покрытия модального и формы, и поэтому он не только выглядит плохо, вы также не можете нажать на входные поля и т. д... Решение для этого, по крайней мере в моем случае, состояло в том, чтобы манипулировать dom с помощью jQuery и исправлять все, что семантический интерфейс забыл сделать автоматически.
Я надеюсь, что это поможет кому-то в будущем....застрял на этом в течение 3 дней сейчас....
Я не знаю, является ли это лучшим решением....но это сработало.... Дайте мне знать, если у вас есть лучшее решение......
Ok...Я нашел ответ получше.
первый ответ, который я дал выше, состоял в том, чтобы переместить диммер в тот же родитель, что и модальный, когда этот модальный может быть в любом контейнере, который ниже в иерархии.
делая это, модальное и форма в модальном больше не покрыты затемнителем.
проблема теперь (по крайней мере, в моем случае) заключалась в том, что диммер покрывал только определенную часть окна, а не все окно, которое должно быть делай. В этом случае не имело значения, пытались ли вы установить высоту css на 100%...так как это, вероятно, уже 100%, но родительский контейнер только подходит к этой точке и, следовательно, диммер.
так что это лучшее решение, которое я нашел.
я обнаружил, что если вы объявляете модальное выше в иерархии, в моем случае я объявил его в самом верхнем контейнере перед целевым контейнером.
это цель контейнер:
<div id="render-target"></div>
и это сказать react для рендеринга к этому контейнеру:
React.render(<App />, document.getElementById("render-target"));
самый верхний контейнер div внутри, где я объявил модальный пользовательский интерфейс с настройкой detachable:false...
теперь, когда я запускаю модальный интерфейс для отображения, я затем использую jQuery для перемещения модального в еще более высокий контейнер div, который в этом случае является целевым контейнером:
$('.ui.modal.editform').appendTo('#render-target');
делая это, затемнитель находится за модальным и формой, но он также охватывает все окно целиком и динамично. Поэтому, если у вас есть длинная таблица с большим количеством записей, и весь документ очень длинный, диммер по-прежнему будет охватывать его полностью без необходимости делать какие-либо ручные настройки.
обновленное решение-использовать semantic-ui-react:
установить съемный: false не является хорошей идеей в моем опыте, потому что модальный ("показать") обычно также создает Гиммер на Вашей странице, он столкнется с проблемой z-индекса.
Я делаю react-semanticui-модальный компонент для решения этой проблемы, используйте этой, заставьте вас использовать семантический модальный в вашем проекте react свободно.