Estoy siguiendo este tutorial de React aquí: https://ibaslogic.com/how-to-edit-todos-items-in-react/ para crear una aplicación TO DO simple.

También revisé ¿Por qué el evento onDoubleClick no funciona en React.js? pero no hay ningún evento onclick del que preocuparse en mi ejemplo.

Mi evento onDoubleClick debería llamar a una función handleEditing pero no sucede nada cuando hago doble clic en un elemento de la lista.

No estoy seguro de por qué no funciona (el navegador web no parece registrar un evento de doble clic.

A continuación se muestra mi ejemplo:

 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;

No creo que esto sea relevante, pero aquí está mi 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; }