6
在普通的舊式Semantic-UI WITHOUT React中，我已經能夠在Modal中放置一個表單而沒有任何問題。React + Semantic-UI：在UI中使用窗體MODAL
使用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');
由於上文提到的。它顯示正常，但由於不變侵犯，它無法正常工作。
我該如何解決此問題並使其工作？
嗨@ J3Y您的解決方案適用於的jsfiddle用非常簡單的HTML結構。我的項目比這個更復雜一些。我創建了一個JSFiddle來演示我的問題。在SAFARI上，Modal隱藏在調光器下面。在FIREFOX上，JSFiddle可以工作......但實際上在瀏覽器中打開FIREFOX中的實際項目，Modal仍然隱藏在調光器下。這是JSFiddle來說明：https：//jsfiddle.net/va1zhu4w/3/使可拆卸：false會擺脫不變的違規錯誤，但有一些副作用，如小提琴中所示。怎麼解決？ – preston
在jsfiddle.net/va1zhu4w/3我已經在div容器周圍添加了
，並且我在Semantic-UI的UI SIDEBAR中包裝了ConfirmEdit Modal ...我添加了一個css margin-top，所以按鈕將不會隱藏在固定菜單下.....只是想我會提及這些只是爲了讓它更容易....感謝 – preston不錯，除了那是我的回答主要工作？ – J3Y