如何将播放与暂停两个独立onClick事件合并为单个点击事件？

你之前的方案没生效主要有两个问题：一是函数语法错误，二是没有用状态跟踪当前播放状态，没法判断该执行播放还是暂停操作。下面是可行的实现方式：

首先，在函数组件里需要用useState维护播放状态，用useRef保存Audio实例（避免每次组件渲染都新建Audio对象，导致之前的播放状态丢失）。完整代码如下：

import { useState, useRef } from 'react';

const playPause = (props) => {
    // 用useRef持久化Audio实例，确保始终操作同一个音频对象
    const audioRef = useRef(new Audio(project));
    // 状态变量：标记当前是否正在播放
    const [isPlaying, setIsPlaying] = useState(false);

    // 合并后的播放/暂停切换函数
    const togglePlayPause = () => {
        if (isPlaying) {
            audioRef.current.pause();
        } else {
            audioRef.current.play();
        }
        // 切换播放状态
        setIsPlaying(!isPlaying);
    };

    return(
        <div>
            <button onClick={togglePlayPause}>
                {/* 根据播放状态动态显示按钮文字 */}
                {isPlaying ? 'Pause' : 'Play'}
            </button>        
        </div>
    )
}

关键说明： #

• useRef的作用：如果直接用let audio = new Audio(project)，每次组件重新渲染时都会创建新的Audio实例，之前的播放进度和状态会丢失。用useRef可以让Audio实例在组件的整个生命周期内保持不变。
• useState的作用：isPlaying状态记录当前音频的播放状态，点击按钮时根据这个状态决定执行播放还是暂停，然后翻转状态值。
• 按钮文本动态切换：让用户直观知道当前点击按钮会触发的操作，提升交互体验。

你之前写的playThanStop存在语法错误（正确写法应该是const playThanStop = () => {}），而且就算修正语法，也因为没有状态判断逻辑，无法实现播放和暂停的切换——它只会固定返回其中一个函数，没法根据当前状态动态调整。

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