我正在构建几个组件,遇到了一些绊脚石。
[这些组件从钢琴键盘开始,通过将notes={[]}
数组道具的音符名称传递到Keyboard
组件,我可以在其上叠加不同的音乐实体,例如音符,音程,和弦,音阶等。然后,在该组件的特定实例中,我将其导入到Scales
组件中,在其中添加了音阶和音符按钮,因此可以在此实例中将整个音阶覆盖在键盘上方,这基本上可以正常工作。有一个音符名称列表,我可以单击该音符名称,然后将该音阶覆盖在键盘上方,如下所示:
The gif shows the current behavior of the Scales
component, which is not quite correct yet...
在gif中,您可以看到主要和次要音阶按钮更改了音阶的状态,然后音符名称按钮将其用于更改其下方键盘的状态。但是我还希望它做的是在单击主按钮或次按钮时切换当前选择的音阶,但是当前音符名称按钮不会自动响应主按钮和次按钮的状态变化,但是必须再次单击以进行更改。
我想要的是能够仅单击大调和小调按钮,并且选择了哪个音符,而无需再次再次单击所选的音阶音符,这就是当前的行为。”
因此,在我的Scales组件中,我像这样使用自定义单选按钮,首先要控制主要和次要按钮:
Scales
...然后控制注释按钮,如下所示:
<MajorInput type="radio" name="scale" id="major" label="major" value="major" checked={scale === 'major'} onChange={handleChange} onClick={() => setScale('major')} /> <MajorLabel whileHover={{ scale: 1 }} whileTap={{ scale: 0.9 }} htmlFor="major" > Major </MajorLabel>
...状态是通过两个useState挂钩建立的,就像这样:
<NoteInput id="c" scale={scale} type="radio" name="notes" label="c" value="c" onClick={ () => setNotes( scale === 'major' ? ['c1p', 'd1ma', 'e1ma', 'f1p', 'g1p', 'a1ma', 'b1ma'] : scale === 'minor' ? ['c1p', 'd1ma', 'eb1mi', 'f1p', 'g1p', 'ab1mi', 'bb1mi'] : '' ) } /> <NoteLabel whileHover={{ scale: 1 }} whileTap={{ scale: 0.9 }} scale={scale} htmlFor="c" > { scale === 'major' ? 'C' : scale === 'minor' ? 'C' : 'C' } </NoteLabel>
...然后,最终导入的
const [ scale, setScale] = useState('') const [ notes, setNotes] = useState([])
组件从音符按钮接收其Keyboard
道具,如下所示:
notes={notes}
...所以我真的不知道如何知道音符按钮或知道所单击的缩放按钮,然后将该信息转换为键盘
<Keyboard octaves={'2'} notes={notes}/>
道具,这就是我现在所处的位置。 ..
这里是组件的代码沙箱:
notes
谢谢您的帮助:-)
我正在构建几个组件,并且遇到了一些绊脚石。组件从钢琴键盘开始,我可以在钢琴键盘上叠加不同的音乐实体,例如音符,...
我浏览了您的代码。