React中使用Ant Design Switch时如何区分多个不同开关实例

两个Switch组件共用同一个onChange回调时，回调默认只返回当前开关的布尔选中值，没有携带组件自身的身份标识，自然无法区分触发事件的具体是哪个开关。

给每个开关绑定唯一自定义标识，在回调中根据标识走对应分支逻辑即可，不需要为每个开关单独写重复的回调函数，非常适配你控制多盏Hue智能灯的场景。

修改后的完整可运行代码：

import React,{ useState } from 'react';
import { Switch } from 'antd';
import './App.css';

const App = () => {
  // 托管每个开关的状态，后续对接Hue接口时可以直接取状态传参
  const [lightStates, setLightStates] = useState({
    one: false,
    two: false
  })

  const onChange = (lightId, checked) => {
    // 更新对应灯的开关状态
    setLightStates(prev => ({...prev, [lightId]: checked}))
    // 根据灯的ID走对应控制逻辑
    switch(lightId) {
      case 'one':
        if(checked) console.log("switch one is checked")
        // 此处写第一盏Hue智能灯的开/关接口调用逻辑即可
        break
      case 'two':
        // 此处写第二盏Hue智能灯的控制逻辑
        break
      default:
        break
    }
  }

  return(
    <div className="App">
      {/* 绑定事件时提前传入当前开关对应的灯ID作为标识 */}
      <Switch checked={lightStates.one} onChange={checked => onChange('one', checked)} />
      <Switch checked={lightStates.two} onChange={checked => onChange('two', checked)} />
    </div>
  )
}
export default App;

后续如果要新增控制更多Hue灯，只需要在lightStates里加对应灯的状态字段，在Switch渲染时传入新的灯ID，再在onChange的switch分支里加对应控制逻辑即可，扩展成本很低。

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