在 React 中处理 Div 元素上的 onKeyDown 事件

在 React 中处理onKeyDowndiv 元素上的事件：

onKeyDown在 div 元素上设置prop。
将元素的选项卡索引设置为0，例如tabIndex={0}。
访问事件对象上按下的键，例如event.key在您的处理函数中。

应用程序.js


const App = () => {
  const handleKeyDown = event => {
    console.log('User pressed: ', event.key);
  };

  return (
    <div>
      <div tabIndex={0} onKeyDown={handleKeyDown}>
        <h2>hello world</h2>
      </div>
    </div>
  );
};

export default App;

反应onkeydown div

默认情况下，div 元素不可聚焦，因此为了处理onKeyDown
div 上的事件，我们必须

在元素上设置tabIndex属性。

该tabIndex属性表示它的元素可以被聚焦以及它参与顺序键盘导航的位置（使用键）。 Tab

当元素的tabIndex设置为时0，元素在顺序键盘导航中可聚焦，在任何正值之后tabIndex。

例如，如果页面上的其他元素的标签索引为 1、2、3 等，则具有 of 的元素tabIndex将0在具有 positive 的元素之后获得焦点tabIndex。

设置`tabIndex`为`-1`

您还可以将元素设置tabIndex为-1，这意味着无法通过顺序键盘导航（使用键Tab
）访问该元素，但可以使用 JavaScript 或通过鼠标单击它来聚焦。

应用程序.js


const App = () => {
  const handleKeyDown = event => {
    console.log('User pressed: ', event.key);
  };

  return (
    <div>
      <div tabIndex={-1} onKeyDown={handleKeyDown}>
        <h2>hello world</h2>
      </div>
    </div>
  );
};

export default App;

onkeydown tabindex 减一

将 divtabIndex设置为-1，它不能使用Tab键聚焦，但仍然可以通过单击鼠标（或使用 JavaScript）聚焦。

对象的key属性KeyboardEvent返回用户按下的键的值。

keydown只要用户按下键盘上的键，就会触发该事件。

您可以通过访问此MDN 页面查看用户可能按下的键
。

在页面加载后立即聚焦元素

onKeyDown如果您想在页面加载后立即将焦点放在设置了 prop 的元素上，请ref在元素上设置 a 并调用
钩子focus()中的方法useEffect。

应用程序.js


import {useEffect, useRef} from 'react';

const App = () => {
  const handleKeyDown = event => {
    console.log('User pressed: ', event.key);
  };

  const ref = useRef(null);

  useEffect(() => {
    ref.current.focus();
  }, []);

  return (
    <div>
      <div ref={ref} tabIndex={-1} onKeyDown={handleKeyDown}>
        <h2>hello world</h2>
      </div>
    </div>
  );
};

export default App;

页面加载上的焦点元素

我们使用useRef挂钩创建一个 ref 对象，使我们能够访问 div 元素。

钩子useRef()可以传递一个初始值作为参数。该钩子返回一个可变的 ref 对象，其.current属性被初始化为传递的参数。

请注意，我们必须访问currentref 对象上的属性才能访问div我们设置prop 的元素。 ref

应用程序.js


useEffect(() => {
  ref.current.focus();
}, []);

当我们将 ref prop 传递给元素时，例如<div ref={myRef} />，React 将.currentref 对象的属性设置为相应的 DOM 节点。

我们使用
focus()
方法来聚焦挂钩中的 div useEffect。

currentref 上的属性使我们可以访问该元素div，因此调用ref.current.focus()会将焦点设置在 div 上。

处理 React 中的 onKeyDown 事件

处理onKeyDown事件：

onKeyDown在元素上设置道具。
使用对象key的属性event获取用户按下的键。
例如，if (event.key === 'Enter') {}。

应用程序.js


import {useState} from 'react';

const App = () => {
  const [message, setMessage] = useState('');

  const handleKeyDown = event => {
    console.log(event.key);

    if (event.key === 'Enter') {
      console.log('✅ Enter key pressed');
    }

    // 👇️ access input value from state
    // console.log(message);

    // 👇️ access input value from event object
    // console.log(event.target.value)
  };

  return (
    <div>
      <input
        type="text"
        id="message"
        name="message"
        value={message}
        onKeyDown={handleKeyDown}
        onChange={event => setMessage(event.target.value)}
      />
    </div>
  );
};

export default App;

反应 onkeydown 事件

如果您需要在元素onKeyDown上设置事件侦听器，请向下滚动到下一个代码片段。 div

我们onKeyDown在input元素上设置了 prop，所以每次用户在获得焦点时按下按钮input，handleKeyDown都会调用该函数。

对象的key属性event返回用户按下的键的值。

每次用户按下一个键时，handleKeyDown函数都会运行，我们会检查用户是否按下了Enter。

该条件if (event.key === 'Enter') {}涵盖所有操作系统 – Windows、Mac、Linux、Android 等。

在 React 中处理 Div 元素上的 onKeyDown 事件

目录

Handling onKeyDown event on Div elements in React