Блог

В MS Word есть функция выбора и создания таблицы, подобной этой:

В моем случае я хочу, чтобы результатом был массив, подобный: [[1,2,3], [4,5,6]] для таблицы 3×2
я не знаю ключевых слов для ее поиска, или есть пакет, который поддерживает это?

Мой ответ(с загрузкой)

 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 amp;amp; currentNode[1] >= i2
                       ? "border-danger border-4 " : " ") //border all selected nodes
                         (nodeHover[0] >= i amp;amp; 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;