Question

我在JSX中实现了:hover事件，请参见：

          <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>

我在onMouseOver和onMouseLeave事件中使用了悬停状态。

现在，我想在JSX中实现:active事件，但是我不知道对：active使用什么鼠标事件。是否有类似onMouseRelease的东西？

有什么想法吗？

Answer 1

您可以使用onMouseDown和onMouseUp事件与css :active具有相似的行为。

这是一个简单的演示：

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [active, setActive] = React.useState(false);

  return (
    <div className="App">
      <h1
        className="hello"
        onMouseDown={() => setActive(true)}
        onMouseUp={() => setActive(false)}
      >
        Hello CodeSandbox
      </h1>
      <h2>Start editing to see some magic happen!</h2>
      <p>{active && "ACTIVE"}</p>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

styles.css

.App {
  font-family: sans-serif;
  text-align: center;
}
.hello:active {
  background-color: red;
}
.hello {
  background-color: yellow;
}

这里是直播CodeSandBox Demo的链接
我正在使用CSS更改:active的背景颜色，并使用jsx在ACTIVE标签中写入<p>。因此可以比较一下，看看行为是否相同。

您如何在JSX中实现：active？

1 个答案: