React + Semantic-UI：在UI MODAL中使用表单 [英] React + Semantic-UI: Using Forms inside UI MODAL

问题描述

在普通的Semantic-UI WITHOUT React中，我已经能够将一个表单放在一个Modal中而没有任何问题。

In the plain old Semantic-UI WITHOUT React, I have been able to put a form inside a Modal without a problem at all.

使用Semantic-UI + React版本，我能够在模态中显示表单，但它不能按照我预期的方式工作。

With the Semantic-UI + React version, I am able to display the form inside the modal, but it doesn't work the way I would expect it to.

例如，在模态之后显示并显示模态内的表格。如果我在输入字段中开始输入，我会显示此错误：

For example, after the modal shows and the form inside the modal also is displayed. If I start inputting in the input field, I would get this error displayed:

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 ``.

由于此错误，我使用输入的其他反应代码无法按预期工作。

And due to this error, the other react code that I use the input for do not work as expected.

这是演示问题的最简单的代码版本：

This is the most simple version of the code that demonstrates the problem:

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>
        );
    }
});

在我添加上面组件的组件内，我确保触发它：

Inside the component where i add the above the component I made sure to trigger it:

$('.ui.modal.editform').modal('show');

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

As mentioned above. It displays fine, but it doesn't work fine due to the Invariant Violation.

如何解决此问题并使其正常工作？

How do I work around this and make it work?

推荐答案

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

You want to initialize the modal in componentDidMount with the option detachable = false.

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

这将阻止模态在全局调光器对象中移动，并且DOM仍将被拥有并且由React管理。 此处记录了其他选项。

This will prevent the modal being moved inside a global dimmer object, and the DOM will still be owned and managed by React. Other options are documented here.

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

I created an example JSFiddle for you to test with.

这篇关于React + Semantic-UI：在UI MODAL中使用表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！