在 ReactJS 中巧妙处理 `onKeyPress` 事件的 5 个妙招

javascript

2024-03-22 10:38:37

如何优雅地在 ReactJS 中处理 onKeyPress 事件

简介

在 ReactJS 开发中，处理用户输入是至关重要的。在本文中，我们将探讨如何使用 onKeyPress 事件来监听键盘按下，并提供一个实际示例，说明如何在按下 Enter 键时触发特定操作。

使用 onKeyPress 事件

onKeyPress 事件在用户按下键盘上的任何键时触发。它接受一个回调函数作为参数，该函数将在事件发生时执行。

要使用 onKeyPress 事件，你需要：

创建一个 React 组件。
在组件中，定义一个将响应事件的处理函数。
在组件的渲染方法中，将 onKeyPress 事件处理程序附加到要监听的元素。

解决问题：在按下 Enter 键时触发警报

以下是如何使用 onKeyPress 事件在按下 Enter 键时触发警报：

class Test extends React.Component {
  add(event) {
    if (event.keyCode === 13) {
      alert('Adding....');
    }
  }

  render() {
    return (
      <div>
        <input type="text" onKeyPress={this.add} />
      </div>
    );
  }
}

创建 Test 组件： 我们创建了一个 React 组件 Test。
定义处理函数： add() 函数将在 onKeyPress 事件触发时执行。
监听 Enter 键： 我们检查 keyCode 属性，当其等于 13（Enter 键）时，触发警报。
附加事件处理程序： 在组件的渲染方法中，将 onKeyPress 事件处理程序附加到输入元素。

代码示例

const Test = () => {
  const add = (event) => {
    if (event.keyCode === 13) {
      alert('Adding....');
    }
  };

  return (
    <div>
      <input type="text" onKeyPress={add} />
    </div>
  );
};

ReactDOM.render(<Test />, document.getElementById('root'));