如何让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），仅供参考