React + Semantic-UI: Sử dụng các biểu mẫu bên trong giao diện người dùng MODAL

Question

Trong ngữ nghĩa ngữ nghĩa cũ không có phản ứng, tôi đã có thể đặt một biểu mẫu bên trong một phương thức mà không có vấn đề gì cả.

Với phiên bản Semantic-UI + React, tôi có thể hiển thị biểu mẫu bên trong phương thức, nhưng nó không hoạt động theo cách tôi mong đợi.

Ví dụ: sau khi chương trình phương thức và biểu mẫu bên trong phương thức cũng được hiển thị. Nếu tôi bắt đầu nhập trong lĩnh vực đầu vào, tôi sẽ nhận được lỗi này hiển thị:

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

Và do lỗi này, người kia phản ứng mã mà tôi sử dụng đầu vào cho không làm việc như mong đợi.

Đây là phiên bản đơn giản nhất của mã đó chứng tỏ vấn đề:

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

Bên trong thành phần nơi tôi thêm phía trên phần tôi đã thực hiện chắc chắn để kích hoạt nó:

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

Như đã đề cập ở trên. Nó hiển thị tốt, nhưng nó không hoạt động tốt do vi phạm bất biến.

Làm cách nào để giải quyết vấn đề này và hoạt động?

Answer 1

Bạn muốn khởi tạo phương thức trong componentDidMount với tùy chọn có thể tháo rời = false.

Điều này sẽ ngăn phương thức di chuyển bên trong đối tượng mờ toàn cầu và DOM vẫn sẽ được sở hữu và quản lý bởi React. Các tùy chọn khác được ghi thành tài liệu here.

Tôi đã tạo ví dụ JSFiddle để bạn thử nghiệm.

Answer 2

Ok ... Tôi ước gì tôi đã nghĩ về điều này trước đó ...

Tôi quyết định phân tích DOM và trực tiếp thao tác DOM cho giải pháp.

Tôi đã cố gắng tìm kiếm giải pháp hack-y ít 'duyên dáng' hơn khác nhưng mọi thứ không hoạt động. Tôi đã thử phương thức Material-UI để tích hợp với các biểu mẫu Semantic-UI nhưng thấy rằng nó không cuộn nếu nội dung của phương thức dài giống như một biểu mẫu vv ......

Tôi cũng đã cố gắng dựa vào API ngữ nghĩa-giao diện người dùng (các cài đặt có sẵn, v.v.) nhưng tất cả đều có một số loại tác dụng phụ tiêu cực.

Vì vậy, đây là những gì tôi đã làm để tìm giải pháp. Tôi đã xem HTML được tạo khi MODAL hiển thị và nhìn vào vị trí của nó trong DOM.

Khi nó quay ra, khi một dimmer được kích hoạt, Semantic-UI hiển thị một div với class này cho mờ

ui dimmer modals page transition visible active 

Tôi thấy điều này div là một anh chị em và không phải là một đứa con của div khác với một lớp của

ui fluid container pushable 

chứa tất cả nội dung khác của tôi.

Vì vậy, những gì tôi đã làm là mỗi khi tôi kích hoạt phương thức, tôi ngay lập tức gọi mã để làm cho phương thức con của vùng chứa đó cho nội dung khác của tôi ... Bằng cách này, phương thức của tôi không bị che khuất.

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

Để tóm tắt: 1.) Với kinh nghiệm của tôi hiển thị một hình thức bên trong một phương thức sử dụng Semantic-UI với Phản ứng, nếu bạn không thiết lập thuộc tính có thể tháo rời của giao diện người dùng PHƯƠNG THỨC của Semantic-UI, nó lỗi với Vi phạm bất biến, v.v. Giải pháp là đặt có thể tháo rời thành sai.

2.) Sau đó, bạn có thể gặp phải vấn đề mờ của phương thức bao gồm các phương thức và biểu mẫu và do đó nó không chỉ trông xấu, bạn cũng không thể bấm vào các trường nhập ... Các giải pháp cho rằng, ít nhất trong trường hợp của tôi, là để thao tác dom với jQuery và sửa chữa bất kỳ Semantic-UI quên làm tự động.

Tôi hy vọng rằng sẽ giúp người trong tương lai .... đã bị mắc kẹt về vấn đề này trong 3 ngày bây giờ ....

Tôi không biết nếu điều này là giải pháp tốt nhất .... nhưng nó đã làm việc .... Hãy cho tôi biết nếu bạn có bất kỳ giải pháp nào tốt hơn ......

Answer 3

Ok ... Tôi đã tìm thấy câu trả lời hay hơn.

Câu trả lời đầu tiên tôi đưa ra ở trên là di chuyển dimmer đến cùng một bậc cha mẹ như phương thức khi phương thức đó có thể nằm trong bất kỳ vùng chứa nào nằm trong cấu trúc phân cấp.

Bằng cách thực hiện điều này, phương thức và biểu mẫu trong phương thức không còn bị che khuất bởi độ mờ.

Vấn đề bây giờ (ít nhất trong trường hợp của tôi) là thiết bị làm mờ chỉ bao phủ một phần nhất định của cửa sổ chứ không phải cửa sổ TOÀN BỘ là điều cần làm. Trong trường hợp này, nó không quan trọng nếu bạn cố gắng thiết lập chiều cao css đến 100% ... vì nó có lẽ đã là 100% nhưng thùng chứa cha mẹ chỉ đi lên đến điểm đó và do đó mờ hơn là tốt.

Vì vậy, đây là giải pháp tốt hơn tôi đã tìm thấy.

Tôi nhận thấy rằng nếu bạn khai báo phương thức cao hơn trong cấu trúc phân cấp, trong trường hợp của tôi, tôi đã khai báo nó ở vùng chứa trên cùng TRƯỚC KHI mục tiêu chứa.

Đây là container mục tiêu:

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

Và đây là nói với phản ứng để trả cho container:

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

Các div container trên cùng bên là nơi tôi công bố giao diện người dùng PHƯƠNG THỨC với thiết lập detachable:false ...

Bây giờ khi tôi kích hoạt UI MODAL để hiển thị, sau đó tôi sử dụng jQuery để chuyển phương thức sang vùng chứa div cao hơn, trong trường hợp này là t anh ta nhắm mục tiêu vùng chứa:

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

Bằng cách này, mờ hơn phía sau phương thức và hình thức nhưng nó cũng bao phủ toàn bộ cửa sổ một cách năng động. Do đó nếu bạn có một bảng dài với rất nhiều mục và toàn bộ tài liệu rất dài, thì độ mờ sẽ vẫn bao trùm toàn bộ mà không cần phải thực hiện thêm bất kỳ điều chỉnh thủ công nào.

Answer 4

Sử dụng context trong cài đặt phương thức. Điều đó làm việc cho tôi.

Answer 5

Đặt có thể tháo rời: giả không phải là một ý tưởng tốt trong kinh nghiệm của tôi, bởi vì phương thức ('show') thường cũng tạo ra một Himmer trong trang của bạn, nó sẽ gặp phải vấn đề z-index.

Tôi tạo thành phần ngữ nghĩa phản ứng-ngữ nghĩa để giải quyết vấn đề này, sử dụng this, làm cho bạn sử dụng phương thức ngữ nghĩa trong dự án phản ứng của bạn một cách tự do.

Answer 6

Giải pháp cập nhật là sử dụng semantic-ui-react:

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

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