onDoubleClick没有对调用函数作出反应。

Question

我在这里遵循这个反应教程：https://ibaslogic.com/how-to-edit-todos-items-in-react/来构建一个简单的应用程序。

我还回顾了Why onDoubleClick event is not working in React.js?，但在我的示例中没有需要担心的onclick事件。

我的onDoubleClick事件应该调用一个函数handleEditing，但是当我双击列表项时不会发生任何事情。

我不知道为什么它不工作(网页浏览器似乎没有注册双击事件。

以下是我的例子：

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

当开发工具未打开时，onDoubleClick可以工作。

Answer 2

最新答案：

正如评论中所发现的，问题是操作系统和浏览器的结合。在本例中，Windows / Chrome。

旧答案：

我还没有详细阅读，但我发现的第一个不同之处是，在您的代码中，handleEditing是不绑定的。这不应阻止console.log的输出。它会出现吗？

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

希望这对你的案子有帮助。