onDoubleClick 無法響應調用 function

Question

我在此處遵循此 React 教程： https://ibaslogic.com/how-to-edit-todos-items-in-react/以構建一個簡單的 TO DO 應用程序。

我還回顧了為什么 onDoubleClick 事件在 React.js 中不起作用？ 但在我的示例中無需擔心onclick事件。

我的onDoubleClick事件應該調用 function handleEditing但當我雙擊列表項時沒有任何反應。

我不確定為什么它不起作用（web 瀏覽器似乎沒有注冊雙擊事件。

下面是我的例子：

import React from "react";
import styles from "./TodoItem.module.css";

class TodoItem extends React.Component {
  state = {
    editing: false,
  };

  handleEditing = () => {
      console.log("doubleClick")
    this.setState({
      editing: true,
    });
  };

  render() {

    const completedStyle = {
      fontStyle: "italic",
      color: "#595959",
      opacity: 0.4,
      textDecoration: "line-through",
    };
    
    const { completed, id, title } = this.props.todo;
    
    let viewMode = {}
let editMode = {}

if (this.state.editing) {
  viewMode.display = "none"
} else {
  editMode.display = "none"
}
    
    return (
      <li className={styles.item}>
        <div onDoubleClick={this.handleEditing} style={viewMode}>
          <input
            type="checkbox"
            className={styles.checkbox}
            checked={completed}
            onChange={() => this.props.handleChangeProps(id)}
          />
          <button onClick={() => this.props.deleteTodoProps(id)}>Delete</button>
          <span style={completed ? completedStyle : null}>{title}</span>
        
        </div>
        <input type="text" style={editMode} className={styles.textInput} />
      </li>
    );
  }
}

export default TodoItem;

我認為這無關緊要，但這是我的 css：

.item {
    font-size: 1.2rem;
    list-style-type: none;
    padding: 17px 0px;
    border-bottom: 1px solid #eaeaea;
  }
  
  .checkbox {
    margin-right: 15px;
  }
  
  .item button {
    font-size: 13px;
    background: #f1f3f4;
    border: none;
    cursor: pointer;
    float: right;
    outline: none;
    border-radius: 100px;
    height: 50px;
    width: 50px;
    margin: -10px 0 0 10px;
  }


  .textInput {
    width: 100%;
    padding: 10px;
    border: 1px solid #dfdfdf;
  }

Answer 1

更新的答案：

正如評論中發現的那樣，問題是操作系統和瀏覽器的結合。 Windows / Chrome 在這個例子中。

老答案：

我沒有詳細閱讀，但我能發現的第一個區別是，在您的代碼中，handleEditing 未綁定。 這不應阻止您的 console.log 的 output。 出現了嗎？

onDoubleClick={this.handleEditing.bind(this)}

希望這對您的情況有所幫助。

Answer 2

onDoubleClick 在您的開發工具未打開時有效

Answer 3

我剛剛在使用 Windows 和 Chrome 時遇到了同樣的問題。 在我的例子中，問題是在 DevTools 打開時正在模擬的設備。 如果我切換 (Ctrl+Shift+M) 以使用鼠標模擬 PC，那么它可以工作並且雙擊時會顯示我的 console.log，但是當模擬觸摸屏時它不起作用。