如何让React吉他组件可交互：onChange与onPlay两大回调完整指南-北京尧图网络

如何让React吉他组件可交互onChange与onPlay两大回调完整指南【免费下载链接】react-guitarA beautiful and accessible guitar component for React. ⚛️ 项目地址: https://gitcode.com/gh_mirrors/re/react-guitarreact-guitar是一个为 React 打造的美观、可访问的吉他组件。本文是面向新手的onChange 与 onPlay 两大回调完整指南讲清回调签名、触发时机与最小示例帮你把一把静态展示的吉他快速变成可交互、能发声的吉他组件。先搞懂核心数据strings 数组在配置回调之前先理解吉他组件的状态——strings数组数组中每个数字代表对应琴弦按压的品格如[0, 1, 2, 2, 0, -1]就是标准调弦下的A 小调和弦0表示空弦-1表示消音不弹这根弦默认从第 0 品开始、共 22 品可用frets{{ from: 0, amount: 22 }}调整这两个回调的签名在 packages/react-guitar/src/index.tsx 中定义回调签名作用onChange(strings: number[]) void琴弦被按下/松开时触发不传则吉他只读onPlay(string: number) void每次弹奏某根弦时触发用于播放声音onChange 回调让吉他从展示变可交互触发时机onChange会在用户点击品格、按方向键移动品位、或按 Enter 释放琴弦时触发参数是更新后的完整strings数组。核心逻辑在 packages/react-guitar/src/index.tsx 的pressString中每次按压都基于当前状态生成新数组并回调。一个细节组件内部会用disabled{!props.onChange}见 packages/react-guitar/src/index.tsx禁用交互——不传 onChange吉他就是一张静态图。最小可用示例可编辑吉他用useState保存当前按弦状态把 setter 直接传给onChange即可官方 Storybook 同款写法见 storybook/index.stories.tsximport { useState } from react import Guitar from react-guitar function EditableGuitar() { const [strings, setStrings] useState([0, 0, 0, 0, 0, 0]) return Guitar strings{strings} onChange{setStrings} / }现在用户点击品格、用方向键移动手指都会实时更新 UI——这就是受控组件的标准套路。onPlay 回调让吉他开口说话触发方式onPlay(string)的参数是弦的索引从 0 开始有两种官方触发方式️鼠标悬停给组件加上playOnHover属性鼠标划过哪根弦就触发哪根弦见 packages/react-guitar/src/index.tsx⌨️键盘弹奏聚焦到某根弦后按p键触发见 packages/react-guitar/src/index.tsx 注意onPlay不依赖onChange。即使吉他只读固定展示一个和弦也可以单独挂上onPlay让它发声——Storybook 中的 with fixed A minor and sound 示例就是这么做的见 storybook/index.stories.tsx。搭配 useSound 自动发音手动实现发音太麻烦项目提供了配套包react-guitar-sound的useSoundHook源码见 packages/react-guitar-sound/src/index.ts它接收当前按弦状态和调弦返回play弹单弦与strum扫弦两个函数import Guitar from react-guitar import useSound from react-guitar-sound import { standard } from react-guitar-tunings function GuitarWithSound() { const strings [0, 1, 2, 2, 0, -1] // 固定的 A 小调 const { play } useSound({ fretting: strings, tuning: standard }) return Guitar strings{strings} onPlay{play} / }调弦数据来自react-guitar-tunings包packages/react-guitar-tunings/src/index.ts内置标准调弦、Open G、DADGAD 等常见配置。默认音色是尼龙民谣吉他也可以用withSoundFont(electric_guitar_clean)换成电吉他或用withSamples({ E2: E2.mp3, ... })换成自己的采样。组合使用一把完整可交互的发声吉他把两个回调一起接上再开启playOnHover就是官网 Demo 的完整形态参考 site/components/Demo.tsximport { useState } from react import Guitar from react-guitar import useSound from react-guitar-sound import { standard } from react-guitar-tunings function InteractiveGuitar() { const [strings, setStrings] useState([0, 0, 0, 0, 0, 0]) const { play } useSound({ fretting: strings, tuning: standard }) return ( Guitar strings{strings} onChange{setStrings} // 手指移动实时更新 onPlay{play} // 弹奏时发音 playOnHover // 鼠标悬停即发声 / ) } 键盘党福利官方 Demo 同款快捷键见 site/hooks/sound.ts按键功能1-6弹奏对应编号的琴弦W/S上扫弦 / 下扫弦方向键在琴弦与品位之间移动手指P弹奏当前聚焦的琴弦Enter释放消音当前琴弦想换风格试试内置主题包react-guitar-theme-dark和react-guitar-theme-coco常见问题快速解答Q只想要能按不需要声音只传onChangestrings状态自己更新即可。Q想让某根弦默认为消音strings数组对应位置写-1如[3, -1, 0, 2, 0, -1]。QonPlay里能拿到当前按了几个品吗不能参数只有弦索引当前品位请从自己维护的strings状态读取。Q官方完整 Props 文档在哪看见 packages/react-guitar/README.md 的 Props 表格。小结一句话记住两大回调的分工onChange(strings)—— 负责手把用户的按弦操作同步到你的状态是吉他可交互的开关onPlay(string)—— 负责声在弹奏事件发生时触发配合useSound即可发音按本文的最小示例把这两个回调接上10 分钟就能做出一个可弹奏、可扫弦的 React 吉他组件。【免费下载链接】react-guitarA beautiful and accessible guitar component for React. ⚛️ 项目地址: https://gitcode.com/gh_mirrors/re/react-guitar创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

如何让React吉他组件可交互：onChange与onPlay两大回调完整指南

相关推荐

Sunshine 多平台编码器对比：NVIDIA NVENC vs AMD AMF vs Intel QuickSync 怎么选？

BongoCat 互动桌宠快速上手指南：键盘、鼠标、手柄全响应

pandas-ta 快速上手：5 分钟让一列价格长出 130+ 技术指标

更多资讯

FrameFetch：开源视频剧本对齐与AI分析报告工具

大数据存储优化：数据压缩技术原理与实践

Agent Skills深度解析：技能库如何让LLM Agent稳定执行复杂任务

无人机集群分布式监控系统设计与算法实现

Docker部署Jitsi-Meet视频会议系统全指南

AI工具如何降低跨境电商Ozon运营门槛

今日更新

微信个人号API开发案例：图片/语音/视频消息怎么下载解析存到本地？

Python股票自动交易系统源码解析：从行情获取到风控的完整链路

视酷酷信IM源码部署指南：Java 17+MySQL 8.0.33实战配置

本周精选

防幻觉智能体架构：电源硬件设计中的大模型编排与工具化实践

OpenGL面试核心考点：渲染管线、矩阵变换与性能排查全解析

全国计算机二级C语言真题PDF高效刷题指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？