在 Reactjs 中选择像 MS Word 这样的表答案

【问题标题】：select table like MS Word in Reactjs在 Reactjs 中选择像 MS Word 这样的表
【发布时间】：2021-10-29 05:39:50
【问题描述】：

在 MS Word 中有一个功能可以像这样选择和创建表格：

在我的情况下，我希望结果是一个数组，例如：[[1,2,3], [4,5,6]] 用于 3x2 表
不知道关键词搜索，或者有没有支持这个的包？

【问题讨论】：

【解决方案1】：

我的回答（带引导程序）

const Demo = () => {
   const [nodeHover, setNodeHover] = useState([0, 0]);
   const [currentNode, setCurrentNode] = useState([0, 0]);
   ...
   return (
     <div>
         {Array(5)
            .fill(Array(5).fill(0)) // 5x5 0 array
            .map((e, i) => (
              <div className="row-node">
                {e.map((e2, i2) => (
                  <div
                    className={
                      "single-node border border-secondary text-danger " +
                       (currentNode[0] >= i && currentNode[1] >= i2
                       ? "border-danger border-4 " : " ") //border all selected nodes
                       + (nodeHover[0] >= i && nodeHover[1] >= i2
                        ? "bg-secondary ": " ") //background color all hovered nodes 
                    }
                    onMouseOver={() => setNodeHover([i, i2])}
                    onClick={() => setCurrentNode([i, i2])}
                  >
                    {" "}
                  </div>
                ))}
              </div>
            ))}
         <h3>selected {(currentNode[0] + 1) * (currentNode[1] + 1)} nodes</h3>
         <h3>Now coordinates {"(" + currentNode[0] + ";" + currentNode[1] + ")"}</h3>
     </div>)
}

style.css

.row-node {
  height: 32px;
}

.single-node {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 0 1px;

【讨论】：