Material Design Lite + React - Các vấn đề với Tooltips

Question

Gần đây, tôi đã tích hợp Material Design Lite vào ứng dụng web React của tôi. Đối với hầu hết các phần, tất cả mọi thứ đã làm việc ra tốt, nhưng hiện tại tôi đang có một số vấn đề với xử lý sự kiện của React, mà dường như không chơi tốt đẹp với một số thành phần MDL.

Cụ thể, tôi có phần tử DOM với trình xử lý onClick, hoạt động hoàn toàn tốt, cho đến khi chú giải Công cụ MDL được thêm vào, khiến cho onClick không còn kích hoạt. Tôi đã thử khá nhiều mọi biến thể có thể (đặt chú giải công cụ vào một nơi khác trong DOM, đính kèm bộ xử lý onClick vào div chứa có chú giải công cụ khi còn nhỏ, v.v) và tôi dường như không thể làm cho nó hoạt động .

Dưới đây là một JSBin đó chứng tỏ vấn đề (tôi cũng đã bao gồm một ví dụ sử dụng jQuery để ràng buộc một handler nhấp chuột để nguyên tố này sau khi gắn kết thành phần, mà thực sự làm việc):

http://jsbin.com/sewimi/3/edit?js,output

Tôi có một số lý thuyết về lý do tại sao điều này không hiệu quả, nhưng tôi không biết đủ về React hoặc MDL để xác minh bất kỳ trong số chúng.

Tôi tin rằng nó có liên quan đến cách React xử lý các sự kiện, và vì một lý do nào đó, MDL dường như đang đụng độ với nó. Từ số documentation:

Phản ứng không thực sự gắn trình xử lý sự kiện cho chính nút đó. Khi React khởi động, nó bắt đầu lắng nghe tất cả các sự kiện ở mức trên cùng bằng cách sử dụng một trình lắng nghe sự kiện duy nhất. Khi một thành phần được gắn hoặc chưa được kết nối, trình xử lý sự kiện được thêm hoặc xóa đơn giản từ một ánh xạ nội bộ . Khi một sự kiện xảy ra, React biết cách gửi nó bằng ánh xạ này. Khi không có xử lý sự kiện còn lại trong bản đồ , Phản ứng của xử lý sự kiện rất đơn giản không-ops

Điều này làm cho nó có vẻ như MDL có thể rối tung với Phản ứng của bản đồ nội bộ của các sự kiện, gây nhấp chuột của tôi trên phần tử trở thành no-op. Nhưng một lần nữa, đây chỉ là một dự đoán hoàn chỉnh.

Có ai có bất kỳ ý tưởng nào về điều này không? Tôi không muốn phải liên kết một trình nghe sự kiện theo cách thủ công trong componentDidMount cho mỗi thành phần của tôi sử dụng MDL Tooltips (giống như tôi đã làm trong ví dụ JSBin mà tôi đã cung cấp), nhưng đó là giải pháp mà tôi đang làm bây giờ.

Ngoài ra, vì tôi không chắc đây có phải là lỗi cụ thể về MDL hay không, tôi đã chọn đăng câu hỏi này tại đây thay vì trên trang issues của họ. Nếu có ai nghĩ tôi nên đăng nó ở đó, hãy cho tôi biết, và tôi có thể làm điều đó.

Cảm ơn!

Answer 1

Tôi cũng gặp vấn đề tương tự này. Tôi đã cố gắng nắm bắt các nhấp chuột sự kiện trên số mdl-menu__item. Và bạn ở ngay trong hệ thống sự kiện tổng hợp của React đó là xung đột. Điều gì xảy ra là nếu một sự kiện xảy ra bên trong thành phần React của bạn, thành phần của bạn sẽ là người cuối cùng được nghe về sự kiện. Công việc của tôi xung quanh là phá vỡ sự kiện phản ứng và sử dụng một thành phần phản ứng giúp gắn các sự kiện bản địa react-native-listener.

<NativeListener onClickCapture={this.onListClick}> 
    <li className='mdl-menu__item' > 
     {...} 
    </li> 
</NativeListener> 

// This will be called by the native event system not react, 
// this is in order to catch mdl-menu events and stop the menu from closing 
// allowing multiple fields to be clicked 
onListClick(field, event) { 
    event.stopImmediatePropagation(); 
    // console.log('click'); 
} 

Giải pháp của tôi là dành cho menu mdl nhưng tôi cũng chắc chắn rằng nó cũng áp dụng cho chú giải công cụ.

Answer 2

Một chút muộn nhưng

componentHandler.upgradeAllRegistered(); 

được tự động nạp các yếu tố làm việc.

Lưu ý: nếu bạn di chuyển phần tử đích thông qua vị trí CSS, chú giải công cụ không hiển thị tự động vị trí mới, bạn cũng cần phải định vị nó và định vị nó.