javascript - React + 语义-UI : Using Forms inside 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 ``.

并且由于这个错误，我使用输入的其他 react 代码无法按预期工作。

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

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供您测试。