React Sentetik Olayları nasıl el ile gönderebilirim?

Question

Varolan bir projeye çok fazla eski kod içeren React bileşenleri eklemeye çalışıyorum.

Karşılaştığım bir sorun, React öğesinin document nesnesindeki olay temsilcisi için işleyicilerine bağlanmasıdır. Maalesef, eski kodumuzdaki pek çok tıklama, tıklama etkinliklerini durdurur ve event.stopPropagation numaralarını belge nesnesine göndermeden önce çağırır (ör., Aracın dışına tıkladığınızda kapanan araç açılır pencereleri ve araçların üstesinden gelmek için).

Tıklama olayına müdahale edildiğinde, olay React'ın belge düzeyindeki olay işleyicisine yayılmaz ve olay, bileşenlerin gerçek DOM öğeleri her ne kadar yukarıdaki bileşenlerin üzerine otursa da React bileşenlerine devredilmez. DOM'da yakalama öğesi ve ilk, temsilci olmayan gerçek olayları alır.

So ... soru: React'ın belge düzeyi olay işleyicisine isabet etmeden belirli bir olay için React sentetik olayını elle tetiklemenin bir yolu var mı? Veya bu tek olay işleyicisini başka bir yere taşımanın veya çoğaltmanın bir yolu var mı?

Geri dönüş olarak, React bileşeni bağlandıktan sonra olay eklemek için jQuery'yi kullanmayı düşünüyorum ancak mümkünse bunu yapmamayı tercih ediyorum.

Answer 1

Ne yaptığınıza bağlı olarak, tepkideki olaylar, bileşenin iç durumu veya benzeri bir değişiklik (örneğin, flux benzeri bir mimari kullanıyorsanız, genel durumda değişiklikler) oluşturmalıdır. Bu nedenle, bu düşünceyle, bileşenlerinizi oluşturmak için bir sarıcı oluşturabilir ve bu sargıyı yapmak istediğiniz şeyle tetikleyebilirsiniz.

Örneğin

:

function renderComponent(props={}) { 
    ReactDOM.render(<Component {...props} />, document.getElementById('elementId')); 
} 

tıkladıktan sonra, bir tepki bileşenin metni üzerinde bir değişiklik yaratmak gerekir, bir düğme var düşünelim.

$('button#my-button').on('click', function(event){ 
    event.preventDefault(); 
    renderComponent({text: 'Hello world!'}); 
}); 

Böylelikle, tepki bileşeniniz text özelliğini alır ve burada metin değişikliğini yapabilirsiniz. Bu, yapabileceğiniz şeylerin hızlı ve kirli bir örneğidir.