Question

我正在尝试在React中的keyup HTML元素上捕获一个<section></section>事件。到目前为止，我还无法使其正常工作。在下面，您将找到处理事件的代码示例：

import React from "react"

function scrollTo(event) {
  // event.preventDefault()
  console.log(event.type)
}

const FullscreenBackground = () => (
  <section
    onWheel={scrollTo}
    onKeyUp={scrollTo}
  >
    // Content
  </section>
)

export default FullscreenBackground

我没有遇到onWheel事件，但是onKeyUp却没有运气。

Answer 1

默认情况下，div元素无法获得焦点。您可以通过向tabIndex="0"元素添加section属性来使该div为“可选”。

function scrollTo(event) {
  // event.preventDefault()
  console.log(event.type)
}

const FullscreenBackground = () => (
  <section
    onWheel={scrollTo}
    onKeyUp={scrollTo}
    tabIndex="0"
  >
    qweqweqweqweqwe
  </section>
)


ReactDOM.render(<FullscreenBackground />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Answer 2

您可以在文件上附加事件。检查下面的代码段。要测试代码段，请在具有“键控代码”的白色区域上单击，然后尝试按一个键。

document.onkeyup = function (event) {
  $("p").html(event.which); // get the key code
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Key Code</p>

如何在任何HTML元素上捕获onKeyUp事件？

2 个答案: