Tôi có một sidenav với một nhóm các đội bóng rổ. Vì vậy, tôi muốn hiển thị một cái gì đó khác nhau cho mỗi đội khi một trong số họ đang được lơ lửng trên. Ngoài ra, tôi đang sử dụng Reactjs vì vậy nếu tôi có thể có một biến mà tôi có thể chuyển sang một thành phần khác sẽ tuyệt vời.Làm cách nào để truy cập trạng thái di chuột trong reactjs?
Các thành phần phản ứng phơi bày tất cả các sự kiện chuột Javascript chuẩn trong giao diện cấp cao nhất của chúng. Tất nhiên, bạn vẫn có thể sử dụng :hover trong CSS của mình và có thể đủ cho một số nhu cầu của bạn, nhưng đối với các hành vi nâng cao hơn được kích hoạt bằng cách di chuột, bạn sẽ cần phải sử dụng Javascript. Vì vậy, để quản lý tương tác di chuột, bạn sẽ muốn sử dụng onMouseEnter và onMouseLeave. Sau đó, bạn đính kèm chúng vào trình xử lý trong thành phần của bạn như vậy:
<ReactComponent
onMouseEnter={this.someHandler}
onMouseLeave={this.someOtherHandler}
/>
Sau đó bạn sẽ sử dụng một số trạng thái/đạo cụ để chuyển trạng thái hoặc thuộc tính đã thay đổi thành con của bạn.
okay, tôi nghĩ sẽ hoạt động. hãy để tôi thử nó. Ngoài ra, làm thế nào tôi có thể vượt qua biến này thành một thành phần khác/không được kết nối? – Username
Điều đó thực sự trở nên phức tạp, React không chính xác cung cấp cho điều đó. Trong kiến trúc của một ứng dụng web, ứng dụng này được đưa vào phương pháp liên lạc toàn cầu, bao quát. Nhiều người sẽ chọn giải pháp loại sự kiện-xe buýt, nơi một số người quản lý sự kiện toàn cầu đang đăng và nhận các sự kiện trong các thành phần khác nhau. Các thông báo sự kiện này sẽ chứa dữ liệu bạn muốn chuyển làm đối số. Đây là những gì Facebook đề xuất trong tài liệu của họ về chủ đề: https://facebook.github.io/react/tips/communicate-between-components.html – stolli
ReactJs định nghĩa các sự kiện tổng hợp sau đây cho các sự kiện chuột:
onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp
Như bạn có thể thấy không có sự kiện di chuột, bởi vì trình duyệt không xác định một sự kiện hover natively.
Bạn sẽ muốn thêm trình xử lý cho onMouseEnter và onMouseLeave cho hành vi di chuột.
thể trùng lặp của [a hover button trong react.js] (http://stackoverflow.com/questions/28072196/a-hover-button-in-react-js) – BentOnCoding