React + Semantic-UI: 在 UI MODAL 中使用表单

Question

在没有 React 的普通旧语义 UI 中，我已经能够毫无问题地将表单放入模态框内。

使用 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');

如上所述。它显示正常，但由于不变违规而无法正常工作。

我该如何解决这个问题并让它发挥作用？

Answer 1

您想使用选项 detachable = false 初始化 componentDidMount 中的模式。

$('.ui.modal').modal({detachable: false});

这将防止模式在全局调光器对象内移动，并且 DOM 仍将由 React 拥有和管理。其他选项记录在案 here.

我创建了一个示例 JSFiddle 供您测试。

Answer 2

好吧...我希望我早点想到这个....

我决定分析DOM，直接操作DOM求解。

我曾尝试寻找其他更多 'graceful' 更少 hack-y 的解决方案，但没有成功。我尝试 Material-UI 的模态与 Semantic-UI 表单集成，但发现如果模态的内容很长，如表单等，它不会滚动……

我也曾尝试依赖 Semantic-UI 的 API（可用设置等），但它们都有某种负面影响。

这就是我为找到解决方案所做的工作。我查看了 MODAL 显示时产生的 HTML 并查看了它在 DOM.

中的位置

事实证明，当调光器处于活动状态时，Semantic-UI 显示一个 div，其中 class 用于调光器

ui dimmer modals page transition visible active

我发现这个 div 是兄弟姐妹，而不是另一个 div 的 child 和

的 class

ui fluid container pushable

其中包含我所有的其他内容。

所以我所做的是每次触发我的模态时，我立即调用代码使模态成为我其他内容的那个容器的 child... 这样我的模式就不会被调光器覆盖。

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.) 根据我在 React 中使用 Semantic-UI 在模态内显示表单的经验，如果你不设置 Semantic-UI 的 UI MODAL 的可拆卸属性，它因不变违规等而出错。解决方法是设置detachable为false。

2.) 在那之后，你可能会遇到模态的调光器覆盖模态和表单的问题，因此它不仅看起来很糟糕，而且你也无法点击输入字段等...... 至少在我的情况下，解决方案是用 jQuery 操纵 dom 并修复 Semantic-UI 忘记自动执行的任何事情。

我希望以后能对某人有所帮助....现在已经坚持了 3 天....

我不知道这是否是最好的解决方案....但它确实有效.... 如果您有更好的解决方案，请告诉我......

Answer 3

好的...我找到了更好的答案。

我在上面给出的第一个答案是将调光器移动到与模态相同的父级，当模态可以位于层次结构中较低的任何容器中时。

这样做，模态和模态中的窗体就不再被调光器覆盖了

现在的问题（至少在我的情况下）是调光器只覆盖了 window 的特定部分，而不是它应该做的整个 window。在这种情况下，如果您尝试将 css 高度设置为 100% 并不重要...因为它可能已经是 100% 但父容器仅达到该点，因此调光器也是如此.

所以这是我找到的更好的解决方案。

我发现，如果您在层次结构中更高层声明模态，在我的例子中，我在目标容器之前的最顶层容器中声明了它。

这是目标容器：

<div id="render-target"></div>

这是告诉 React 渲染到那个容器：

React.render(<App />, document.getElementById("render-target"));

里面最上面的 div 容器是我用设置 detachable:false...

声明 UI MODAL 的地方

现在当我触发 UI MODAL 显示时，我然后使用 jQuery 将模态移动到更高的 div 容器，在本例中是目标容器:

$('.ui.modal.editform').appendTo('#render-target');

通过这样做，调光器位于模态和形式之后，但它也以动态方式完全覆盖整个 window。因此，如果你有一个很长的 table 并且有很多条目并且整个文档很长，调光器仍然会完全覆盖它而不需要你做任何更多的手动调整。

Answer 4

在模态设置中使用context。这对我有用。

Answer 5

根据我的经验，设置可分离的：false 不是一个好主意，因为 modal('show') 通常也会在您的页面中创建一个 Himmer，它会遇到 z-index 问题。

我做了一个react-semanticui-modal组件来解决这个问题，使用this，让你在你的react项目中自由使用semantic modal

Answer 6

更新后的解决方案是使用semantic-ui-react:

https://github.com/Semantic-Org/Semantic-UI-React

http://react.semantic-ui.com/modules/modal

React + Semantic-UI: 在 UI MODAL 中使用表单

React + Semantic-UI: Using Forms inside UI MODAL

javascript

reactjs

modal-dialog

semantic-ui