如何使选定的单选按钮根据另一个单选按钮更改另一个状态来更改一个状态？

Question

我正在构建几个组件，但遇到了一些绊脚石。

组件以钢琴键盘开始，我可以在其上叠加不同的音乐实体，如音符、音程、和弦、音阶等...通过将音符名称通过 notes={[]} 数组道具传递到 Keyboard 组件.然后在组件的这个特定实例中，我将它导入到Scales 组件中，我在其中添加了比例和注释按钮，因此我可以在此实例中将整个比例覆盖在键盘顶部，这基本上都可以工作。有一个我可以单击的音符名称列表，然后将其覆盖在键盘顶部，如下所示：

The gif shows the current behavior of the Scales component, which is not quite correct yet...

在 gif 中，您可以看到大调和小调音阶按钮改变了音阶的状态，然后音符名称按钮使用它来改变其下方键盘的状态。但我还希望它做的是在单击主要或次要按钮时切换当前选择的音阶，但目前音符名称按钮不会自动对主要和次要按钮的状态变化做出反应，但必须再次单击以进行更改。

我想要的是能够只单击大调和小调按钮，并且选择的任何一个音符都会简单地从大调变为小调，而无需再次重新单击选定的音阶音符，这是当前的行为。

所以，在我的 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>

...然后控制笔记按钮，如下所示：

<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>

...状态是通过两个 useState 钩子建立的，如下所示：

const [ scale, setScale] = useState('')

const [ notes, setNotes] = useState([])

...然后最终导入的Keyboard 组件从注释按钮接收它的notes={notes} 属性，如下所示：

<Keyboard octaves={'2'} notes={notes}/>

...所以我真的不知道如何让注释按钮知道或知道被单击的比例按钮，然后将该信息转换为键盘 notes 道具，这就是我现在卡住的地方...

这里是组件的代码沙箱：

https://codesandbox.io/s/scales-981uk

感谢您的帮助:-)

Answer 1

我查看了您的代码。

您现在遇到的问题是，当单击主要按钮时，您的笔记组件没有重新呈现和重新设置样式。在 React 中，您可以使用 props 的更改来触发重新渲染，这也会重新设置您的笔记样式。

我建议将您所有的笔记输入放入一个子组件中。 ：

// ./Scales.js

import NoteButtonBox from ./NoteButtonBox.js

//...

// important: pass scale as props. 
// Everytime scale changes, the note buttons are rerendered and restyled
sub component
  return (
    <Container>
      <ScaleButtonBox>
        {/* ... */}
      <ScaleButtonBox>
      <NoteButtonBox scale={scale} />
      {/* ... */}

// ./NoteButtonBox.js


const NoteButtonBox = ({scale}) => {
   // Don't forget to also move 'const [notes, setNotes] = useState([]);' into the 
  const [notes, setNotes] = useState([]);
  return { 
    /* return your styled notes based on props scale */
  }
}

---

编辑

对于需要跨多个子组件访问状态的情况，可以使用React Context。或者，您可以使用 React Redux 来完成同样的事情。我建议使用 Comtext，因为它是 React 的原生部分。

将您的应用程序分解为子组件似乎是不必要的工作，但在 React 中创建许多小组件是一种很好的做法。 React 鼓励像我建议的那样组合。

1. 创建一个NotesStateContext 类。
2. 您定义需要它的位置NotesStateContext.Provider：

      <NotesStateContext.Provider value="dark">
        <NoteButtonBox />
        </* All other components that need to access the state of your notes */>
      </NotesStateContext.Provider>

1. 从提供者获取和更新您的状态