React 中的 onDoubleClick

我們將介紹如何在我們的 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 方法被執行了。

建議不要在同一個按鈕上使用這兩種方法，因為它不會按預期工作。