Bir grup basketbol takımına sahip bir sidenavum var. Bu yüzden, her biri bir takımın üzerine geldiğinde her takım için farklı bir şey göstermek istiyorum. Ayrıca, Reactjs kullanıyorum, bu yüzden harika olabilecek başka bir bileşene geçebileceğim bir değişkene sahip olsaydım.Reaktiflerdeki bir geçiş durumuna nasıl erişebilirim?
Tepki bileşenleri, tüm standart Javascript fare olaylarını en üst düzey arayüzlerine maruz bırakır. Tabii ki, hala CSS'nizde :hover'u kullanabilirsiniz ve bu sizin ihtiyaçlarınız için yeterli olabilir, ancak bir gezginin tetiklediği daha gelişmiş davranışlar için Javascript'i kullanmanız gerekir. Bu nedenle, gezinme etkileşimlerini yönetmek için onMouseEnter ve onMouseLeave'u kullanmak istersiniz. Daha sonra bu kadar sevdiği bileşeninde işleyicileri ekleyebilirsiniz:
<ReactComponent
onMouseEnter={this.someHandler}
onMouseLeave={this.someOtherHandler}
/>
Ardından çocuğunuz Tepki bileşenler aşağı değişti devlet veya özellikleri geçmesine durum/sahne bazı kombinasyonlarını kullanacağız.
tamam, sanırım Bu çalışacaktır. Test etmeme izin ver. Ayrıca, bu değişkeni farklı/bağlı olmayan bir bileşene nasıl aktarabilirim? – Username
Bu gerçekten zorlaşır, React tam olarak bunu sağlamaz. Bir web uygulamasının mimarisinde, seçilen küresel aşırı iletişim yöntemine geçilir. Birçok insan, bazı küresel etkinlik yöneticilerinin farklı bileşenlere olayları gönderip aldıkları bir olay-otobüs türü çözümü seçerdi. Bu etkinlik mesajları, argüman olarak iletmek istediğiniz verileri içerir. Facebook'un bu konuyla ilgili dokümanlarında önerdiği şey şudur: https://facebook.github.io/react/tips/communicate-between-components.html – stolli
ReactJs fare olayları aşağıdaki sentetik olayları tanımlar: Gördüğünüz gibi tarayıcılar doğal bir vurgulu olay tanımlamak çünkü
onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp
, hiçbir vurgulu olay yoktur.
Vurgulu davranışı için onMouseEnter ve onMouseLeave için işleyicileri eklemek isteyeceksiniz.
[react.js bir vurgulu düğme] olası yinelenen (http://stackoverflow.com/questions/28072196/a-hover-button-in-react-js) – BentOnCoding