How do you implement :active in JSX?

Asked Aug 28 '19 at 01:13

Active Aug 28 '19 at 07:54

Viewed 448 times

I implemented :hover event in JSX see:

          <div
            tabIndex={0}
            vertical="center"
            horizontal="space-between"
            className={`cell ${header.name}Size ${selectedHeader.name === header.name && styles.focus}`}
            key={index}
            onClick={onSortClickHandler(header.name)}
            onMouseOver={onHoverHandler(index)}
            onMouseLeave={onHoverCancleHandler(index)}
            style={hover.isHover && hover.index === index ? styles.hover : {}}
          > ... </div>

I used hover state with onMouseOver, onMouseLeave events.

Now I want to implement :active event in JSX, but I don't know what mouse events to use for :active. Is there are something like onMouseRelease?

Any ideas?

edited Aug 28 '19 at 01:30

asked Aug 28 '19 at 01:13

JillAndMe

3,989
4
30
57

You can try would event put in function like: `onMouseOver={() => { onHoverHandler(index); }}` and don't forget modify `onClick` and `onMouseLeave` ! – Clark Aug 28 '19 at 01:16
@Clark are those events for :hover or :active? I asked you what mouse events to use for :active – JillAndMe Aug 28 '19 at 01:22
Use `onMouseMove` – Clark Aug 28 '19 at 01:25
Possible duplicate of [React pseudo selector inline styling](https://stackoverflow.com/questions/43701748/react-pseudo-selector-inline-styling) – Etheryte Aug 28 '19 at 01:26
@Nit no it recommends using third party library – JillAndMe Aug 28 '19 at 01:29
`onMouseDown` and `onMouseUp` ? – Vaibhav Vishal Aug 28 '19 at 07:29

How do you implement :active in JSX?

0 Answers0