如何修改react-simple-keyboard语言布局？解决切换报错问题

一、实现多语言布局 #

要切换到其他语言（如中文拼音、日文等），核心是自定义对应语言的键盘布局，再通过状态切换加载不同布局。

实现步骤： #

• 定义多语言布局对象：为每种语言设置default和shift布局（如果需要），布局格式为嵌套数组，每一行对应键盘的一行按键。
• 新增语言切换状态：用useState管理当前激活的语言，比如currentLanguage。
• 关联布局与语言：根据当前语言，将对应的布局传入Keyboard组件的layout属性。
• 适配Shift键逻辑：调整Shift切换逻辑，确保对应语言的shift布局能正确触发。

二、修复切换语言时的forEach报错 #

报错Cannot read properties of undefined (reading 'forEach')的核心原因：切换到的布局未正确定义（比如指定了不存在的layoutName，或布局结构不符合要求），导致键盘组件遍历布局时读取到undefined。

解决方案： #

• 确保所有用到的layoutName（如default、shift）在当前语言的布局对象中都有对应定义。
• 切换语言时同步更新layout和layoutName状态，避免状态不一致。
• 布局结构必须符合要求：外层是对象，键为布局名称（default/shift），值为按键行数组。

完整示例代码（中英双语切换） #

import React, { useRef, useState } from "react";
import Keyboard from "react-simple-keyboard";
import "react-simple-keyboard/build/css/index.css";

function App() {
  const [input, setInput] = useState("");
  const [layout, setLayout] = useState("default");
  const [currentLanguage, setCurrentLanguage] = useState("en");
  const keyboard = useRef();

  // 定义多语言布局：英文、中文拼音
  const languageLayouts = {
    en: {
      default: [
        "` 1 2 3 4 5 6 7 8 9 0 - = {backspace}",
        "{tab} q w e r t y u i o p [ ] \\",
        "{lock} a s d f g h j k l ; ' {enter}",
        "{shift} z x c v b n m , . / {shift}",
        ".com @ {space}"
      ],
      shift: [
        "~ ! @ # $ % ^ & * ( ) _ + {backspace}",
        "{tab} Q W E R T Y U I O P { } |",
        '{lock} A S D F G H J K L : " {enter}',
        "{shift} Z X C V B N M < > ? {shift}",
        ".com @ {space}"
      ]
    },
    zh: {
      default: [
        "1 2 3 4 5 6 7 8 9 0 {backspace}",
        "{tab} q w e r t y u i o p",
        "{lock} a s d f g h j k l ;",
        "{shift} z x c v b n m , . {shift}",
        "{space} {enter}"
      ],
      shift: [
        "! @ # $ % ^ & * ( ) {backspace}",
        "{tab} Q W E R T Y U I O P",
        '{lock} A S D F G H J K L "',
        "{shift} Z X C V B N M < > {shift}",
        "{space} {enter}"
      ]
    }
  };

  const onChange = input => {
    setInput(input);
  };

  const handleShift = () => {
    setLayout(prev => prev === "default" ? "shift" : "default");
  };

  const onKeyPress = button => {
    if (button === "{shift}" || button === "{lock}") handleShift();
  };

  const onChangeInput = event => {
    const inputVal = event.target.value;
    setInput(inputVal);
    keyboard.current?.setInput(inputVal);
  };

  // 切换语言
  const switchLanguage = (lang) => {
    setCurrentLanguage(lang);
    setLayout("default"); // 切换语言时重置为默认布局
  };

  return (
    <>
      <div style={{ marginBottom: "1rem" }}>
        <button onClick={() => switchLanguage("en")} disabled={currentLanguage === "en"}>
          英文
        </button>
        <button onClick={() => switchLanguage("zh")} disabled={currentLanguage === "zh"} style={{ marginLeft: "0.5rem" }}>
          中文拼音
        </button>
      </div>
      <input
        value={input}
        placeholder="点击虚拟键盘开始输入"
        onChange={onChangeInput}
        style={{ padding: "0.5rem", fontSize: "1rem", width: "100%", maxWidth: "500px" }}
      />
      <Keyboard
        keyboardRef={r => (keyboard.current = r)}
        layoutName={layout}
        layout={languageLayouts[currentLanguage]} // 传入当前语言的布局
        onChange={onChange}
        onKeyPress={onKeyPress}
      />
    </>
  );
}

export default App;

关键修复点： #

1. 所有语言都定义了default和shift布局，避免切换时出现布局未定义的情况。
2. 切换语言时强制重置layout为default，确保新语言的默认布局被正确加载。
3. 使用keyboard.current?.setInput的可选链操作，避免组件未挂载时调用方法报错。

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