如何使该表格的单元格在第二次单击时可编辑

Question

第一次单击时，焦点应位于单元格上，第二次单击时，焦点应位于输入框上...

import React, { useState } from 'react';

function App() {
  const [currentIndex, setCurrentIndex] = useState(null);
  // const [currentColor, setCurrentColor] = useState("");

  const [array, setArray] = useState(Array.from({ length: 4 }, () =>
      Array.from({ length: 4 }, () => ({
        color: "",
        text: "",
      })
    ))
  )

  function selectCell(row,col){

    console.log("Selected Cell ==>",row,col);
    console.log("CurrentIndex ==>",currentIndex);
    setCurrentIndex({row:row,col:col})

  }

  function handleText(text,row,col){
    console.log("Text =>",text)
    let newArray=[...array];
    newArray[row][col].text=text;
    setArray(newArray);
    console.log("Array =>",array)
  }

  function changeColor(color){
    if (currentIndex) {
        const newArray = [...array];
          newArray[currentIndex.row][currentIndex.col].color = color;
          setArray(newArray);
         }
  }

  return (
    <div className="App" style={{ display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center" }}>
      <div style={{ marginTop: "100px" }}>
        <button onClick={() => changeColor("red")}>Red</button>
        <button onClick={() => changeColor("blue")}>Blue</button>
        <button onClick={() => changeColor("green")}>Green</button>
      </div>


      <div style={{ marginTop: "100px" }}>
        {array.map((arr, rowIndex) => (
          <div key={rowIndex} style={{ display: "flex" }}>
            {arr.map((item, colIndex) => (
              <div
                onClick={()=>selectCell(rowIndex,colIndex)}
                key={colIndex}
                style={{  width: 100, height:50, margin:2, display:'flex',alignItems:"center",justifyContent:"center",
                   backgroundColor: item.color,
                  border: currentIndex && currentIndex.row === rowIndex && currentIndex.col === colIndex ? "2px solid black" : "1px solid black"
                }}
                >
                {currentIndex && currentIndex.row==rowIndex && currentIndex.col == colIndex ? 
                   <input
                   type="text"
                   style={{width: 90, height:40, backgroundColor:item.color }}
                    value={item.text}
                   readOnly={!( currentIndex && currentIndex.row === rowIndex && currentIndex.col === colIndex)}
                   onChange={(e)=>handleText(e.target.value,rowIndex,colIndex)}
                 /> 

                : `${item.text}`}
               
                
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;
  

这是我的代码，想知道我做错了什么 ...我是否错误地设置了 currentIndex 状态... 目前，当单击单元格时，第二次或第三次，输入框将变为可编辑，但是，第二次单击时它应该变为可编辑......

我怀疑我在设置 currentIndex 时遇到了一些问题，但无法找出问题所在。

Answer 1

问题似乎在于如何跟踪单元格上的点击以使输入框可编辑。输入在多次单击后变得可编辑，但您希望它在第二次单击时可编辑。

一种更简单的方法是直接跟踪单元格上的点击计数。以下是调整逻辑的方法：

const [clickCount, setClickCount] = useState(0);

function selectCell(row, col) {
  if (currentIndex && currentIndex.row === row && currentIndex.col === col) {
    setClickCount(prev => prev + 1);
  } else {
    setCurrentIndex({ row, col });
    setClickCount(1);
  }
}

• 添加 clickCount 状态来跟踪单元格上的点击次数。
• 更新 selectCell 函数以处理第一次和第二次单击。

clickCount 状态跟踪单元格被单击的次数。当达到2时，输入框变为可编辑状态。这应该可以解决第二次单击时使单元格可编辑的问题。

这是 JSX 的相关部分：

{currentIndex && currentIndex.row === rowIndex && currentIndex.col === colIndex && clickCount >= 2 ? 
  <input
    type="text"
    style={{ width: 90, height: 40, backgroundColor: item.color }}
    value={item.text}
    onChange={(e) => handleText(e.target.value, rowIndex, colIndex)}
  />
: `${item.text}`}