使用 CSS 网格在 React 中创建自定义虚拟屏幕键盘的问题。并非所有按钮都会显示

Question

我正在尝试使用CSS网格为React应用程序创建一个屏幕键盘来划分它所在的容器。据我所知，我已经根据需要设置了显示属性和网格模板，但由于某种原因它只显示 4 个按钮，其中大部分隐藏在右下角的按钮下方。如上所示。

如果我将网格模板变小，我会得到更多按钮，但如果我将其变大，它就会回到上面。

这是我的组件代码。

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="L" onClick={() => handleKeyClick("'")}>
        '
      </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="commma-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>
      <button className="special-characters-button">.?123</button>
      <button className="enter-button" onClick={() => handleKeyClick("\n")}>
        Enter
      </button>
    </div>
  );
};

export default OnScreenKeyboard;

这是随附的 CSS 文件。我已经注释掉了我用来获取更多按钮的网格，以便您可以看到我尝试过的内容。

.on-screen-keyboard {
  display: grid;
  grid-template-columns: repeat(1fr, 44);
  grid-template-rows: repeat(1fr, 4);
  /* grid:
    "Q W E R T"
    "Caps A S D F"
    "Shift Z XX C V"
    "Special Emoji Space Left Right"; */
  grid-template-areas:
    "Q Q Q Q W W W W E E E E R R R R T T T T YY YY YY YY U U U U I I I I O O O O P P P P Backspace Backspace Backspace Backspace"
    "Q Q Q Q W W W W E E E E R R R R T T T T YY YY YY YY U U U U I I I I O O O O P P P P Backspace Backspace Backspace Backspace"
    "Caps Caps A A A A S S S S D D D D F F F F G G G G H H H H J J J J K K K K L L L L ' ' Enter Enter Enter Enter"
    "Caps Caps A A A A S S S S D D D D F F F F G G G G H H H H J J J J K K K K L L L L ' ' Enter Enter Enter Enter"
    "Shift Shift Shift Shift Z Z Z Z XX XX XX XX C C C C V V V V B B B B N N N N M M M M Comma Comma Comma Comma FullStop FullStop FullStop FullStop Enter Enter Enter Enter"
    "Shift Shift Shift Shift Z Z Z Z XX XX XX XX C C C C V V V V B B B B N N N N M M M M Comma Comma Comma Comma FullStop FullStop FullStop FullStop Enter Enter Enter Enter"
    "Special Special Special Special Emoji Emoji Emoji Emoji Space Space Space Space Space Space Space Space Space Space Space Space Space Space Space Space Space Space Space Space Left Left Left Left Right Right Right Right Special Special Special Special Enter Enter Enter Enter"
    "Special Special Special Special Emoji Emoji Emoji Emoji Space Space Space Space Space Space Space Space Space Space Space Space Space Space Space Space Space Space Space Space Left Left Left Left Right Right Right Right Special Special Special Special Enter Enter Enter Enter";
  grid-gap: 10px;
  padding: 10px;
  height: 100%;
  width: 100%;
  min-width: 500px; /* Adjust min-width as needed for responsiveness */
  margin: 0 auto;
  background-color: #f4f4f4;
  border: 2px solid #ccc;
  border-radius: 8px;
  font-family: Arial, sans-serif;
}
/* 
.keyboard-row {
  display: flex;
  justify-content: space-between;
} */

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: YY;
}

.U {
  grid-area: U;
}

.I {
  grid-area: I;
}

.O {
  grid-area: O;
}

.P {
  grid-area: P;
}

.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;
}

.Z {
  grid-area: Z;
}

.X {
  grid-area: XX;
}

.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;
}

.left-button {
  grid-area: LeftArrow;
}

.right-button {
  grid-area: RightArrow;
}

/* Shift button styles */
.shift-button {
  grid-area: Shift;
  font-weight: bold;
}

/* Special characters button styles */
.special-characters-button {
  grid-area: Special;
}

/* Emojis button styles */
.emojis-button {
  grid-area: Emoji;
}

/* Backspace button styles */
.backspace-button {
  grid-area: Backspace;
  color: #ff0000; /* Red color for backspace */
}

/* Space button styles */
.space-button {
  grid-area: Space;
}

/* Enter button styles */
.enter-button {
  grid-area: Enter;
  background-color: #00ff00; /* Green color for enter */
}

我尝试过很多事情。包括为列和行添加模板，但似乎没有任何效果。也许我只是无法获得我想要的列数？

非常感谢您能给我的任何帮助。我希望这是我做的一些愚蠢的事情，但我似乎无法解决。

Answer 1

有一些东西与您的 HTML 和 CSS 不匹配。

1. 您的

   '

   键具有 className

   L

   ，而不是它自己的类和样式。
2. 有些类没有像

   caps-button

那样定义网格区域

在你的 CSS 中，你想用

44

次

1fr

重复每一行，但参数向后，它应该是

grid-template-columns: repeat(44, 1fr);

这么说确实意味着 grid-template-areas 的每

行应该有 44 个项目，否则浏览器将不接受它。

您可以在

codesandbox 观看工作演示