onDoubleClick未处理react以调用函数

Question

我在这里学习React教程：https://ibaslogic.com/how-to-edit-todos-items-in-react/构建一个简单的待办事项应用程序。

我还回顾了为什么双击事件在React.js中不起作用？但是在我的示例中没有CCD_ 1事件需要担心。

我的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)}

希望这对你的情况有所帮助。