考虑到输入的创建数组具有价值

Question

我正在尝试使用随机字母字符构建一个 5x5 网格，除非文本输入具有值。如果该输入具有值，则网格中的两个单元格将填充该值，而网格的其余部分将填充随机字母字符。如果输入没有值，则网格将照常填充。

const alphabet = "abcdefghijklmnopqrstuvwxyz";

const getRandomLetterRow = (size) =>
  Array.from({ length: size }, () => {
    return alphabet[Math.floor(Math.random() * alphabet.length)];
  });

const generateGrid = (size = 5) => {
  return Array.from({ length: size }, () => {
    return getRandomLetterRow(size);
  });
};

    function App(){
             const [customLetter, setCustomLetter] = useState();
             const [grid, setGrid] = useState(generateGrid());

             console.log(grid);

             return(
                  <div>
                      <input
                           type="text"
                           placeholder="Type"
                           onChange={(e) => setCustomLetter(e.target.value)}
                      />
                  </div>
              )
    }

我到达了网格填充随机字母字符的部分，但我不知道如何用输入值填充两个单元格。如果输入有值，我需要能够创建一个数组，其中两个值是输入值，其余的将是随机字母字符，如果没有，它将按现在的方式创建。

Answer 1

一些变化是： -

function App() {
   const [grid, setGrid] = useState(generateGrid());
   return (
        <div className="App">
        <input
           type="text"
           placeholder="Type"
           onChange={(e) => setGrid((prev)=>{
                   return prev.map((value,index)=>{
                       if (index === 0){
                        return  [e.target.value,e.target.value,...value.slice(2, -1)]
                       }
                       return value
               })
             })}
      />
  
</div>
);
}