React如何为单个标签绑定多个事件及点击后隐藏所有按钮的实现方法

你现有代码中已经定义了show状态，直接基于该状态做逻辑调整即可：

1. 在handleStart、handleStop两个点击处理函数中，调用setShow(false)更新状态
2. 在JSX中对按钮做条件渲染，仅当show为true时展示两个按钮

修改后的完整代码如下：

import {useEffect, useState, useRef} from 'react'

function Content() {
   
    const [countdown, setCountdown] = useState(10)
    const [show, setShow] = useState(true)

    const ref = useRef()

    function handleStart() {
        ref.current = setInterval(() => {
            setCountdown(prev => {
                // 额外优化：倒计时到0时自动清除定时器
                if(prev <= 1) {
                    clearInterval(ref.current)
                    return 0
                }
                return prev - 1
            })
        }, 1000)
        // 点击后隐藏按钮
        setShow(false)
    }
    function handleStop() {
        clearInterval(ref.current)
        // 点击后隐藏按钮
        setShow(false)
    }
 

    return (
        <div>
            <h2 style={{padding: 20}}>Time remaining: {countdown}</h2>
            {/* 条件渲染按钮 */}
            {show && (
                <>
                    <button onClick={handleStart}>Start</button>
                    <button onClick={handleStop}>Stop</button>
                </>
            )}
        </div>
    )

}

export default Content;

分为两种场景处理：

• 绑定不同类型的事件：直接在标签上声明多个事件属性即可，示例如下：

<button 
  onClick={() => console.log('点击事件')}
  onMouseEnter={() => console.log('鼠标移入事件')}
  onMouseLeave={() => console.log('鼠标移出事件')}
>
  多事件绑定测试
</button>

• 同一类型事件绑定多个处理函数：在事件回调中依次调用多个方法即可，注意如果需要透传事件对象e要手动传入：

const handleA = (e) => console.log('处理逻辑A', e)
const handleB = (e) => console.log('处理逻辑B', e)

// 同一个点击事件触发两个处理函数
<button onClick={(e) => {
  handleA(e)
  handleB(e)
}}>
  同事件多处理函数测试
</button>

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