React多实例相同组件回调异常：仅触发首个组件回调问题

问题根源 #

你所有的Checkbox实例中，<input>元素都使用了相同的id="switch"，而<label>的htmlFor属性也绑定了这个固定id。在HTML规范中，id必须全局唯一，当多个元素共用同一个id时，浏览器只会响应第一个匹配的元素。这就导致点击第二个或第三个Checkbox的label时，实际触发的是第一个id为switch的input，进而执行第一个组件的onToggle回调。

解决方案一：为每个Checkbox生成唯一ID（推荐） #

利用React的useId钩子（React 18+支持）为每个Checkbox实例生成全局唯一的id，确保input和label一一对应：

import React, { useState, useId } from 'react';
import styles from './checkbox.module.css';

interface CheckboxProps {
  initialState: boolean;
  onToggle: () => void;
}

const Checkbox: React.FC<CheckboxProps> = ({ initialState, onToggle }) => {
  const [checked, setChecked] = useState<boolean>(initialState);
  const switchId = useId(); // 生成唯一ID

  const handleChange = () => {
    const newChecked = !checked;
    setChecked(newChecked);
    onToggle();
  };

  return (
    <>
      <input
        className={styles.switch}
        type="checkbox"
        id={switchId} // 使用唯一ID
        checked={checked}
        onChange={handleChange}
      />
      <label className={styles['switch-label']} htmlFor={switchId}>Toggle</label>
    </>
  );
};

export default Checkbox;

如果使用React 17及以下版本，可以通过props传入唯一id（比如父组件传递id属性），或者用Math.random()生成临时唯一值：

// React 17及以下版本的替代方式
const switchId = `switch-${Math.floor(Math.random() * 10000)}`;

解决方案二：用label包裹input，无需id绑定 #

将input直接嵌套在label内部，这样点击label会自动触发input的change事件，无需依赖id和htmlFor：

修改组件JSX：

import React, { useState } from 'react';
import styles from './checkbox.module.css';

interface CheckboxProps {
  initialState: boolean;
  onToggle: () => void;
}

const Checkbox: React.FC<CheckboxProps> = ({ initialState, onToggle }) => {
  const [checked, setChecked] = useState<boolean>(initialState);

  const handleChange = () => {
    const newChecked = !checked;
    setChecked(newChecked);
    onToggle();
  };

  return (
    <label className={styles['switch-wrapper']}>
      <input
        className={styles.switch}
        type="checkbox"
        checked={checked}
        onChange={handleChange}
      />
      <span className={styles['switch-label']}>Toggle</span>
    </label>
  );
};

export default Checkbox;

调整CSS选择器（适配新结构）：

.switch-wrapper {
  cursor: pointer;
  display: block;
}

.switch {
  height: 0;
  width: 0;
  visibility: hidden;
}

.switch-label {
  text-indent: -9999px;
  width: 51.2px; 
  height: 25.6px; 
  background: rgb(241, 44, 44);
  display: block;
  border-radius: 80px;
  position: relative;
}

.switch-label:after {
  content: "";
  position: absolute;
  top: 4px; 
  left: 4px; 
  width: 17.6px; 
  height: 17.6px; 
  background: #fff;
  border-radius: 70.4px; 
  transition: 0.3s;
}

/* 调整选择器为兄弟选择器，适配嵌套结构 */
.switch:checked + .switch-label {
  background: #a5ce1e;
}

.switch:checked + .switch-label:after {
  left: calc(100% - 4px); 
  transform: translateX(-100%);
}

.switch-label:active:after {
  width: 22.4px; 
}

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