如何将鼠标拖过多个输入或带有 contentEditable 的元素到 select 里面的文本？

Question

当 contentEditable 设置为 true 时，只能选择获得焦点的元素。 我正在尝试制作 function 的单元格，就像它们在 excel 中所做的那样。我希望能够通过单击编辑单元格，否则我只会将 contentEditable 设置为 state 和 select 作为常规 div 元素。 我想过用 onMouseOut 做些什么来将 state 更改为 false，但它们似乎不起作用。

应用组件：

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>
  );
}

细胞成分：

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

Answer 1

<div class = "div1" onmousedown = "selectFunction()"> 

function selectFunction() { 

document.getElementByClassName("div1")[0].style.color = "red"; } 

也许是这样的？ 但是，这仅适用于其中一个 div，请尝试将它们应用于所有 div。 这可能行不通，如果行不通，我将对其进行编辑。 （所有这一切都突出显示了红色的 div，如果你想一次 select 多个 div 可能不会工作）