React JS中如何实现点击其他按钮关闭toggle开关

核心逻辑 #

要实现状态同步，核心是统一管理toggle的开关状态：

• toggle的开关状态需为可全局访问的共享状态，不能仅封装在toggle按钮自身的点击事件内
• 动态生成的关闭按钮的点击事件中，除了处理自身隐藏逻辑，必须主动更新toggle的绑定状态

原生JS实现示例 #

HTML代码 #

<!-- Toggle开关 -->
<input type="checkbox" id="toggle" class="toggle-switch">
<label for="toggle">功能开关</label>
<!-- 动态元素容器 -->
<div id="dynamic-area"></div>

JS代码 #

const toggle = document.getElementById('toggle')
const dynamicArea = document.getElementById('dynamic-area')

// 监听toggle状态切换
toggle.addEventListener('change', () => {
  if (toggle.checked) {
    // toggle开启时生成关闭按钮
    dynamicArea.innerHTML = `<button id="close-btn">关闭功能</button>`
    // 给动态生成的按钮绑定点击事件
    document.getElementById('close-btn').addEventListener('click', () => {
      // 1. 移除动态按钮
      dynamicArea.innerHTML = ''
      // 2. 同步修改toggle状态，自动触发toggle的change逻辑
      toggle.checked = false
    })
  } else {
    // toggle关闭时清空动态区域
    dynamicArea.innerHTML = ''
  }
})

Vue3 实现示例 #

<template>
  <!-- Toggle开关绑定共享状态 -->
  <input type="checkbox" v-model="isToggleOpen" class="toggle-switch">
  <!-- 动态按钮和toggle共用同一个状态控制显隐 -->
  <button v-if="isToggleOpen" @click="handleClose">关闭功能</button>
</template>

<script setup>
import { ref } from 'vue'
// 全局共享的toggle状态
const isToggleOpen = ref(false)

const handleClose = () => {
  // 直接修改共享状态，自动同步toggle和动态按钮的显隐
  isToggleOpen.value = false
}
</script>

React 实现示例 #

import { useState } from 'react'

function ToggleDemo() {
  // 全局共享的toggle状态
  const [isToggleOpen, setIsToggleOpen] = useState(false)

  const handleClose = () => {
    setIsToggleOpen(false)
  }

  return (
    <>
      <input 
        type="checkbox" 
        checked={isToggleOpen}
        onChange={e => setIsToggleOpen(e.target.checked)}
        className="toggle-switch"
      />
      {isToggleOpen && <button onClick={handleClose}>关闭功能</button>}
    </>
  )
}

常见踩坑点 #

• 动态生成的按钮没有在生成完成后绑定事件，也没有做事件委托，导致点击事件不触发
• 关闭按钮的点击事件仅处理自身隐藏逻辑，未修改toggle的checked属性或绑定的状态变量，导致两者状态不同步

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