React 中的 onDoubleClick

Rana Hasnain Khan 2022年5月18日
React 中的 onDoubleClick

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

在 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;
}

输出:

React ondoubleclick 结果

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

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

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

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

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

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

输出:

使用 onclick 方法对双击结果做出 React

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

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

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

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn

相关文章 - React Event