FCC鼓机项目：如何实现子组件向父组件回传按键ID

核心逻辑是父组件向子组件传递接收数据的回调函数，子组件在触发事件时调用该回调并传入对应ID，针对你的类组件场景按以下步骤修改即可：

1. 父组件新增状态与接收ID的回调 #

首先在App父组件的state中新增字段存储当前触发的声音ID，再定义一个接收ID参数的方法，用于更新该状态：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // 保留原有状态字段，新增如下字段
      activeSoundId: ''
    };
    // 手动绑定方法this指向
    this.updateActiveSound = this.updateActiveSound.bind(this);
  }

  // 新增：接收子组件传回的ID并更新状态
  updateActiveSound(soundId) {
    this.setState({
      activeSoundId: soundId
    });
  }

  // 其余原有生命周期、业务逻辑保留
}

2. 遍历渲染时将回调传递给子组件 #

遍历音频数据数组生成PlayAudio子组件时，把上面定义的updateActiveSound作为自定义prop传入子组件：

render() {
  return (
    <div>
      {/* 原有渲染逻辑修改如下，给子组件加传回调的prop */}
      {soundDataList.map(item => (
        <PlayAudio
          key={item.id}
          keycode={item.keycode}
          id={item.id}
          url={item.url}
          // 父组件回调传给子组件
          onSoundTrigger={this.updateActiveSound}
        />
      ))}
    </div>
  )
}

3. 子组件触发播放时调用回调回传ID #

在PlayAudio子组件内，不管是按钮点击触发播放、还是监听键盘事件触发播放的逻辑里，执行播放操作的同时，调用父组件传来的onSoundTrigger方法，把当前子组件对应的ID作为参数传入：

class PlayAudio extends React.Component {
  // 播放逻辑方法
  handlePlay = () => {
    // 保留原有的音频播放逻辑
    const audioEl = this.audioRef.current;
    audioEl.currentTime = 0;
    audioEl.play();
    // 新增：调用父组件回调，传回当前ID
    this.props.onSoundTrigger(this.props.id);
  }

  // 组件挂载时绑定键盘监听、卸载时移除监听的逻辑保留，触发时同样调用handlePlay即可
}

4. 父组件新增ID显示区域 #

在父组件render方法的合适位置，直接读取state中存储的activeSoundId渲染即可：

render() {
  return (
    <div className="drum-machine">
      {/* 新增显示区域 */}
      <div className="display-panel">
        {this.state.activeSoundId || '请点击或按下对应按键'}
      </div>
      {/* 原有渲染按钮、音频组件的逻辑保留 */}
      <div className="pad-group">
        {/* 遍历生成的PlayAudio组件 */}
      </div>
    </div>
  )
}

注意点：

• 类组件自定义方法一定要手动绑定this指向，或者用类字段箭头函数写法避免this指向错误
• 键盘全局监听记得在componentWillUnmount生命周期中移除，避免内存泄漏
• 遍历子组件时必须用唯一的id作为key，避免渲染异常

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