React播放按钮点击切换状态，第二次点击无法回退如何解决？

• 核心问题是事件冒泡冲突：你点击暂停区域时，RadioContainerSecond绑定的stop事件触发后，事件会向上冒泡到父级PlayContainer，触发它绑定的start事件，相当于先执行了状态回退，又立刻触发了播放逻辑，所以看起来状态没有发生变化。
• 次要是不合理的状态存储实践：将完整JSX元素存入useState不符合React设计理念，状态应该仅存储最小必要的数据源，视图逻辑通过状态推导即可，不需要把整个渲染结构存在状态中。

我们只需要用一个布尔值存储播放状态，所有渲染逻辑通过状态条件判断即可，同时规避事件冒泡问题：

import { useState } from 'react';

export default function Play() {
  // 仅存储最小必要状态：当前是否处于播放中
  const [isPlaying, setIsPlaying] = useState(false);

  function togglePlay() {
    setIsPlaying(prevStatus => !prevStatus);
  }

  return (
    <OuterCircle>
      <InnerCircle>
        <PlayContainer onClick={togglePlay}>
          {isPlaying ? (
            <RadioContainerSecond>
              <PlayButton src="/img/pause.svg" />
              <Video
                width="560"
                height="315"
                src="https://www.youtube.com/embed/21qNxnCS8WU?autoplay=1&controls=0"
                title="YouTube video player"
                frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              />
            </RadioContainerSecond>
          ) : (
            <RadioContainer>
              <PlayButton src="/img/play.svg" />
            </RadioContainer>
          )}
        </PlayContainer>
      </InnerCircle>
    </OuterCircle>
  );
}

• 代码更简洁：移除了冗余的状态存储逻辑和单独的start/stop函数，整体代码量减少近40%
• 避免事件冲突：统一将切换逻辑绑定在父级容器，不需要额外处理事件冒泡，彻底解决状态回退失效的问题
• 可维护性更强：状态仅保留最小数据源，符合React单向数据流的设计规范，后续如果要新增播放相关的扩展逻辑，只需要基于isPlaying状态开发即可

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