Cuando contentEditable se establece en verdadero, solo se puede seleccionar el elemento que está enfocado. Estoy tratando de hacer celdas que funcionen como lo hacen en Excel. Me gustaría poder editar la celda con un solo clic; de lo contrario, simplemente configuraría contentEditable con estado y los seleccionaría como elementos div regulares. Pensé en hacer algo con onMouseOut para cambiar el estado a falso, pero parece que no funciona.
Componente de la aplicación:
import { useState, useRef, useEffect } from "react"; import Cell from "./Cell"; export default function App() { const testRef = useRef(); const [st, setSt] = useState(false); useEffect(() => { if (st) testRef.current.focus(); }, [st]); return ( <div style={{ display: "flex" }}> <Cell tabindex="1" /> <Cell tabindex="2" /> <Cell tabindex="3" /> </div> ); }Componente celular:
import "./styles.css"; import { useState, useRef, useEffect } from "react"; export default function Cell() { const [editing, setEditing] = useState(true); const testRef = useRef(); const stopEditing = () => setEditing(false); const startEditing = () => setEditing(true); return ( <div> <div ref={testRef} contentEditable={editing} // onBlur={stopEditing} // onMouseUp={stopEditing} onMouseOver={startEditing} style={{ display: "flex", border: "1px solid #696969", width: "100px", height: "25px", cursor: "cell", margin: "2px" }} ></div> <p>{editing.toString()}</p> </div> ); }https://codesandbox.io/s/unruffled-rain-i0v40g?file=/src/Cell.js:0-734
<div class = "div1" onmousedown = "selectFunction()"> function selectFunction() { document.getElementByClassName("div1")[0].style.color = "red"; }¿Quizás algo como esto? Sin embargo, esto solo funcionará para uno de los div, intente aplicarlos a todos los div. Esto podría no funcionar, lo editaré si no funciona. (Todo esto resalta el div rojo, probablemente no funcionará si desea seleccionar varios div a la vez)