Как я могу получить доступ к состоянию наведения в reactjs?

Question

Как я могу получить доступ к состоянию наведения в reactjs?

У меня есть sidenav с кучей баскетбольных команд. Поэтому я хотел бы показать что-то другое для каждой команды, когда один из них зависает. Кроме того, я использую Reactjs, поэтому, если бы у меня была переменная, которую я мог бы передать другому компоненту, это было бы потрясающе.

706 2

reactjs hover

2 ответов:

Comments

Ничего не найдено.

stolli · Accepted Answer · 2015-08-20 21:37:46

компоненты React предоставляют все стандартные события мыши Javascript в своем интерфейсе верхнего уровня. Конечно, вы все еще можете использовать :hover в вашем CSS, и это может быть достаточно для некоторых ваших потребностей, но для более продвинутых поведений, вызванных наведением курсора, вам нужно будет использовать Javascript. Поэтому для управления взаимодействиями при наведении вы захотите использовать onMouseEnter и onMouseLeave. Затем вы прикрепляете их к обработчикам в своем компоненте следующим образом:
<ReactComponent
    onMouseEnter={this.someHandler}
    onMouseLeave={this.someOtherHandler}
/>
затем вы будете использовать некоторую комбинацию состояние / реквизит для передачи измененного состояния или свойств вашим дочерним компонентам React.

BentOnCoding · Accepted Answer · 2017-12-25 15:03:48

ReactJs определяет следующие синтетические события для событий мыши:
onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp
Как вы можете видеть, нет события наведения, потому что браузеры не определяют событие наведения изначально.

вы хотите добавить обработчики для onMouseEnter и onMouseLeave для поведения при наведении.

ReactJS Docs-Events