如何为react-simple-keyboard添加iOS式按键放大按压视觉反馈？

这个功能其实没你想的那么复杂，不需要手动定位按键空间位置，利用组件自带的事件回调结合CSS就能实现，具体步骤如下：

• 监听按键状态
  react-simple-keyboard提供了onKeyPress和onKeyReleased回调，用这两个事件标记当前被按压的按键：

  const [activeKey, setActiveKey] = useState(null);
  
  const handleKeyPress = (button) => {
    setActiveKey(button);
  };
  
  const handleKeyReleased = () => {
    setActiveKey(null);
  };
  
  <Keyboard
    onKeyPress={handleKeyPress}
    onKeyReleased={handleKeyReleased}
    // 你的其他键盘配置
  />
  

• 添加CSS放大样式
  给按键设置过渡动画，激活时触发缩放效果：

  .hg-button {
    transition: transform 0.1s ease;
  }
  
  .hg-button.active {
    transform: scale(1.2);
    transform-origin: center;
  }
  

• 关联状态与按键样式
  通过buttonTheme属性，给当前激活的按键添加样式类：

  <Keyboard
    // 你的其他键盘配置
    buttonTheme={(button) => {
      return button === activeKey ? "hg-button active" : "hg-button";
    }}
  />
  

这样就能实现和iOS键盘类似的按压放大视觉反馈了，完全依赖组件自身的机制，不需要额外处理位置计算。

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