onKeyPress 是文本字段的接口的一部分。它可以用于所有主要的 JavaScript 框架，包括 React。当你希望每次用户在你的字段中键入字母、数字或其他内容时执行函数时，此事件处理程序会很有用。你还可以指定哪个键应触发事件的执行。

React 中的 onKeyPress

根据 MDN 的官方文档，不推荐使用 onKeyPress 事件。MDN 的开发人员不建议使用它。但是，不要失去希望 – 有一个可行的替代方案，我们将在本文的后面部分讨论。

如果你想使用已弃用的 onKeyPress 事件，这里是如何在 React 中处理 onKeyPress 事件。

class App extends Component {
  render() {
    console.log('App started');
    this.handleKeyPress = (e) => {
      if(e.key === 'Enter'){
        console.log('You must have pressed Enter ')
      }
    }
return(
         <div>
           <input type="textfield" id="text" onKeyPress={this.handleKeyPress}/>
         </div>
     );
  }
}

此解决方案适用于 React 0.14.7 版。

此解决方案使用命名的 key 属性来检查用户是否按下了 Enter 键。

if(e.key === 'Enter'){
    console.log('You must have pressed Enter ')
}

或者，你也可以使用 charCode 或 charKey 属性在用户按下特定键后触发事件。同样，让我们​​看看如何有条件地检查用户是否按下了 Enter 键，该键的 charCode 为 13。

代码示例：

if(e.charCode === 13){
   console.log('You must have pressed Enter ')
}

如果用这个替换以前使用的条件，结果将是相同的。事实上，charCode 属性使用起来更安全，因为它在浏览器中比命名的 key 属性得到更广泛的支持。

keyCode 属性不太可预测。在上面的例子中，如果我们 console.log(e.keyCode)，我们会看到一个 0。这是因为一些新的编码环境不支持它。如果你在编写应用程序时遇到此问题，你可以使用 charCode 作为替代。

React 中的 onKeyPress 与 onKeyDown

onKeyPress 已被 HTML 开发人员弃用。2021 年秋季，许多主要浏览器仍然支持它，但是一旦发布了更新的浏览器版本，对 onKeyPress 的支持就会减少。因此，除非你有使用 onKeyPress 的非常具体的原因，请改用 onKeyDown，它的作用基本相同，但略有不同。

keyPress 事件仅针对产生字母数字值的键盘键触发。这些包括用于键入空格的所有字母、数字、标点符号和键。修饰键，例如 Alt、Shift 或 Ctrl 不能触发 onKeyPress 事件。

每次按下任何键时都会触发 onKeyDown。生成字母数字值的键与不生成字母数字值的键之间没有区别。按下 Backspace 和 Caps Lock 等键盘键将生成 onKeyDown 事件，但不会生成 onKeyPress。

React 中的 onKeyDown

除了上面提到的细微差别之外，onKeyDown 事件本质上与 onKeyPress 相同。最重要的区别在于，它目前在所有主要浏览器中都得到支持，并且将在未来几年内得到支持。

onKeyDown 也更加一致，无论你使用哪个 React 版本。

以下是相同的解决方案如何与 onKeyDown 一起使用：

class App extends Component {
  render() {
    console.log('App started');
    this.handleKeyDown = (e) => {
      if(e.keyCode === 13){
      console.log('You must have pressed Enter ')
      }
    }
return(
         <div>
           <input type="textfield" id="text" onKeyDown={this.handleKeyDown} />
         </div>
     );
  }
}

请注意，为了检查触发 onKeyDown 事件的键，我们使用了 keyCode 属性，该属性无法通过 onKeyPress 访问。

if(e.keyCode === 13)

同样，我们也可以使用命名的 key 属性：

if(e.key === "Enter")

无论哪种方式，如果我们选择输入并单击 Enter 两次，这就是我们的控制台的样子：

火焰兔

海报 链接

我们将介绍如何在我们的 React 应用程序中使用 onDoubleClick 事件，并在同一个按钮上使用 onClick 和 onDoubleClick。

在 React 中使用 onDoubleClick 事件

在开发 Web 应用程序或商业软件时，我们需要使用 onClick 事件来执行许多功能。但有时，我们可能需要在双击时调用函数或在双击时禁用函数。

React 为我们提供了 onDoubleClick，只要用户在元素上单击两次即可激活它，我们附加了 onDoubleClick 方法。

本教程将通过一个示例创建一个新的 React 应用程序，该应用程序带有一个带有 onDoubleClick 事件的按钮。

因此，让我们使用以下命令创建一个新的 React 应用程序。

# react
npx create-react-app my-app

在 React 中创建我们的新应用程序后，我们将使用此命令转到我们的应用程序目录。

# react
cd my-app

让我们运行我们的应用程序来检查所有依赖项是否都安装正确。

# react
npm start

我们将在 App.js 中返回一个按钮，该按钮带有函数 handleDoubleClick() 的 onClick 事件。

# react
<button onDoubleClick={handleDoubleClick}>Click This Button </button>;

让我们创建函数 handleDoubleClick()，它将 console.log 一个值。

# react
function handleDoubleClick() {
    console.log("Double Button Click Activated");
  }

让我们使用 CSS 为我们的按钮添加一些样式。

# react
button {
  background: black;
  color: white;
  border: none;
  padding: 15px 15px;
}
button:hover {
  background: white;
  color: black;
  border: 1px solid black;
}

输出：

我们可以轻松地在按钮上创建任何 onDoubleClick 事件并使用这些简单的步骤传递任何功能。

现在让我们检查一下当我们添加 onClick 和 onDoubleClick 时我们的按钮将如何响应。

我们将在同一个按钮上包含一个 onClick 事件，我们的代码如下所示。

# react
<button onClick={singleClick} onDoubleClick={handleDoubleClick}>
        Click This Button Twice
      </button>

一旦我们添加了点击方法，我们将创建一个函数 singleClick，当单击该按钮一次时将调用该函数。

# react
function singleClick() {
    console.log("You clicked One Time");
  }

输出：

如上所示，这两种方法都可以在同一个按钮上工作，但并不准确，因为当我们单击一次按钮时，会执行 onClick 方法。

但是当我们在按钮上单击两次时，onClick 方法被执行了两次，同时 onDoubleClick 方法被执行了。

建议不要在同一个按钮上使用这两种方法，因为它不会按预期工作。

火焰兔

海报 链接