React+CSS Grid实现虚拟键盘：按钮无法全部显示问题求助

你的虚拟键盘布局问题主要来自CSS Grid的语法错误、区域定义不匹配，以及元素重复定义导致的重叠：

核心错误点 #

1. Grid行列语法错误：grid-template-columns: repeat(1fr, 44) 和 grid-template-rows: repeat(1fr, 4) 完全写反了repeat()函数的参数顺序，正确格式是repeat(重复次数, 尺寸)，错误的语法会被浏览器忽略，导致网格布局崩溃。
2. 重复的网格行定义：grid-template-areas里重复写了8行（比如前两行完全一致），这会让网格生成多余的行，挤压元素位置。
3. Grid区域不匹配：
   • left-button的grid-area: LeftArrow，但模板里用的是Left
   • right-button的grid-area: RightArrow，模板里用的是Right
   • 带单引号的按钮没有设置grid-area，会被自动放到错误位置
4. 元素重复冲突：
   • JSX里有两个className="L"的按钮，会共用同一个L网格区域，导致重叠
   • 末尾重复添加了special-characters-button和enter-button，会和前面的按钮争夺区域，导致遮挡

修正后的代码 #

1. 修正JSX组件 #

import React from "react";
import "../CSS/Keyboard.css";

const OnScreenKeyboard = () => {
  const handleKeyClick = (character) => {
    // Placeholder code: Insert the character into the input field
  };

  return (
    <div className="on-screen-keyboard">
      {/* 第一行 */}
      <button className="Q" onClick={() => handleKeyClick("q")}>q</button>
      <button className="W" onClick={() => handleKeyClick("w")}>w</button>
      <button className="E" onClick={() => handleKeyClick("e")}>e</button>
      <button className="R" onClick={() => handleKeyClick("r")}>r</button>
      <button className="T" onClick={() => handleKeyClick("t")}>t</button>
      <button className="Y" onClick={() => handleKeyClick("y")}>y</button>
      <button className="U" onClick={() => handleKeyClick("u")}>u</button>
      <button className="I" onClick={() => handleKeyClick("i")}>i</button>
      <button className="O" onClick={() => handleKeyClick("o")}>o</button>
      <button className="P" onClick={() => handleKeyClick("p")}>p</button>
      <button className="backspace-button">Backspace</button>

      {/* 第二行 */}
      <button className="caps-button">Caps</button>
      <button className="A" onClick={() => handleKeyClick("a")}>a</button>
      <button className="S" onClick={() => handleKeyClick("s")}>s</button>
      <button className="D" onClick={() => handleKeyClick("d")}>d</button>
      <button className="F" onClick={() => handleKeyClick("f")}>f</button>
      <button className="G" onClick={() => handleKeyClick("g")}>g</button>
      <button className="H" onClick={() => handleKeyClick("h")}>h</button>
      <button className="J" onClick={() => handleKeyClick("j")}>j</button>
      <button className="K" onClick={() => handleKeyClick("k")}>k</button>
      <button className="L" onClick={() => handleKeyClick("l")}>l</button>
      <button className="apostrophe-button" onClick={() => handleKeyClick("'")}>'</button>
      <button className="enter-button" onClick={() => handleKeyClick("\n")}>Enter</button>

      {/* 第三行 */}
      <button className="shift-button">Shift</button>
      <button className="Z" onClick={() => handleKeyClick("z")}>z</button>
      <button className="X" onClick={() => handleKeyClick("x")}>x</button>
      <button className="C" onClick={() => handleKeyClick("c")}>c</button>
      <button className="V" onClick={() => handleKeyClick("v")}>v</button>
      <button className="B" onClick={() => handleKeyClick("b")}>b</button>
      <button className="N" onClick={() => handleKeyClick("n")}>n</button>
      <button className="M" onClick={() => handleKeyClick("m")}>m</button>
      <button className="comma-button" onClick={() => handleKeyClick(",")}>,</button>
      <button className="fullstop-button" onClick={() => handleKeyClick(".")}>.</button>

      {/* 第四行 */}
      <button className="special-characters-button">.?123</button>
      <button className="emojis-button">😀</button>
      <button className="space-button" onClick={() => handleKeyClick(" ")}>Space</button>
      <button className="left-button">Left</button>
      <button className="right-button">Right</button>
    </div>
  );
};

export default OnScreenKeyboard;

2. 修正CSS样式 #

.on-screen-keyboard {
  display: grid;
  /* 定义4行，每行高度平分 */
  grid-template-rows: repeat(4, 1fr);
  /* 用grid-template-areas定义键盘布局，每行对应一个键盘行 */
  grid-template-areas:
    "Q W E R T Y U I O P Backspace"
    "Caps A S D F G H J K L Apostrophe Enter"
    "Shift Z X C V B N M Comma FullStop ."
    "Special Emoji Space Space Space Space Left Right . .";
  grid-gap: 10px;
  padding: 10px;
  height: 400px; /* 固定高度避免自适应问题，可根据需求调整 */
  width: 100%;
  max-width: 1200px; /* 限制最大宽度防止拉伸变形 */
  min-width: 500px;
  margin: 0 auto;
  background-color: #f4f4f4;
  border: 2px solid #ccc;
  border-radius: 8px;
  font-family: Arial, sans-serif;
}

button {
  padding: 0.5rem;
  font-size: 1.5rem;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

button:hover {
  background-color: #ccc;
}

/* 第一行区域 */
.Q { grid-area: Q; }
.W { grid-area: W; }
.E { grid-area: E; }
.R { grid-area: R; }
.T { grid-area: T; }
.Y { grid-area: Y; }
.U { grid-area: U; }
.I { grid-area: I; }
.O { grid-area: O; }
.P { grid-area: P; }
.backspace-button { 
  grid-area: Backspace;
  color: #ff0000; 
}

/* 第二行区域 */
.caps-button { grid-area: Caps; }
.A { grid-area: A; }
.S { grid-area: S; }
.D { grid-area: D; }
.F { grid-area: F; }
.G { grid-area: G; }
.H { grid-area: H; }
.J { grid-area: J; }
.K { grid-area: K; }
.L { grid-area: L; }
.apostrophe-button { grid-area: Apostrophe; }
.enter-button { 
  grid-area: Enter;
  background-color: #00ff00; 
}

/* 第三行区域 */
.shift-button { 
  grid-area: Shift;
  font-weight: bold; 
}
.Z { grid-area: Z; }
.X { grid-area: X; }
.C { grid-area: C; }
.V { grid-area: V; }
.B { grid-area: B; }
.N { grid-area: N; }
.M { grid-area: M; }
.comma-button { grid-area: Comma; }
.fullstop-button { grid-area: FullStop; }

/* 第四行区域 */
.special-characters-button { grid-area: Special; }
.emojis-button { grid-area: Emoji; }
.space-button { grid-area: Space; }
.left-button { grid-area: Left; }
.right-button { grid-area: Right; }

关键修复说明 #

• 修正了repeat()函数的参数顺序，移除了无效的行列定义，改用grid-template-areas清晰定义布局
• 删除了重复的按钮元素，为每个按钮分配唯一的网格区域
• 调整了网格布局结构，用.填充空白区域，避免元素自动填充到错误位置
• 固定了网格容器高度，防止因父元素高度不确定导致的布局塌陷

内容的提问来源于stack exchange，提问作者BJAlcorn