У меня есть сиднав с кучей баскетбольных команд. Поэтому я хотел бы показать что-то другое для каждой команды, когда один из них завис. Кроме того, я использую Reactjs, поэтому, если бы у меня была переменная, которую я мог бы передать другому компоненту, который был бы потрясающим.
Как я могу получить доступ к состоянию зависания в реакциях?
Ответ 1
Реагирующие компоненты выставляют все стандартные события мыши Javascript в их интерфейсе верхнего уровня. Конечно, вы все равно можете использовать :hover в своем CSS, и это может быть достаточно для некоторых ваших потребностей, но для более продвинутых действий, вызванных зависанием, вам нужно будет использовать Javascript. Поэтому для управления взаимодействием наведения вам нужно использовать onMouseEnter и onMouseLeave. Затем вы прикрепляете их к обработчикам в своем компоненте следующим образом:
<ReactComponent
onMouseEnter={this.someHandler}
onMouseLeave={this.someOtherHandler}
/>
Затем вы будете использовать некоторую комбинацию состояния/реквизита для передачи измененного состояния или свойств до ваших компонентов Реагенты вашего ребенка.
Ответ 2
ReactJs определяет следующие синтетические события для событий мыши:
onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp
Как вы видите, нет события hover, потому что браузеры не определяют событие зависания изначально.
Вы захотите добавить обработчики для onMouseEnter и onMouseLeave для зависания.