为何Semantic-UI React组件中Checkbox的onClick触发3次？

我正在使用Semantic-ui开发React组件，该组件包含一个条目列表，每个条目下有一组复选框。但点击单个复选框时，绑定的setCheckbox方法会被触发3次，控制台会打印3次日志。我的组件代码如下：

import React, { Component } from 'react'
import { Divider,Label,List,Checkbox,Header } from 'semantic-ui-react'

export default class Menu extends Component {
 constructor(props) {
 super(props);
 this.state = { checkboxes: [] }
 }

 render() {
 let { tags } = this.props;
 return ( 
<div className="ui segment basic" >
 {typeof tags === "undefined" ? <div>Select partner and process</div> : this.getTagListItems(tags) }
</div>
 )
 }

 getTagListItems = tagsData => {
 let tags = [];
 for(let i=0; i<tagsData.length; i++){
 if ( tagsData[i].children.length !==0 ) {
 tags.push( 
<div className="container" key = { i }>
<Header as="h3">{ tagsData[i].name }</Header>
<Divider/>
<List>
 {this.getTagCheckboxes(tagsData[i].children)}
</List>
</div>
 );
 }
 }
 return tags;
 };

 getTagCheckboxes = checkboxData => {
 let checkboxes = [];
 for(let i=0; i<checkboxData.length; i++) {
 checkboxes.push( 
<List.Item key = { checkboxData[i].id }>
<Checkbox label = { checkboxData[i].name } id = { checkboxData[i].id } onClick = { this.setCheckbox } />
<List.Content floated="right" >
<Label> 0 </Label>
</List.Content>
</List.Item>
 );
 }
 return checkboxes;
 };

 setCheckbox = (e, itemData) => {
 let { checkboxes } = this.state;
 console.log('ITEMM!!!', itemData)
 }
}

这个问题我之前也碰到过，核心原因很明确：Semantic-UI React的Checkbox是一个复合封装组件，内部包含了input、label等多个可点击元素。当你给它绑定onClick事件时，事件会通过DOM冒泡机制被多个内部元素触发，最终导致你的setCheckbox被多次调用。

这里给你两个关键调整方案，优先推荐第一种：

1. 替换onClick为onChange事件（最优解） #

Checkbox组件专门提供了onChange事件，这个事件只会在复选框的选中状态发生变化时触发一次，完全避开了事件冒泡带来的多次调用问题，而且更符合表单组件的设计逻辑。

同时我们可以完善状态管理，用state.checkboxes记录选中的复选框ID，正确控制复选框的选中状态：

修正后的代码片段： #

首先修改getTagCheckboxes中的Checkbox部分：

<Checkbox 
  label={checkboxData[i].name} 
  id={checkboxData[i].id} 
  onChange={this.setCheckbox} 
  checked={this.state.checkboxes.includes(checkboxData[i].id)}
/>

然后更新setCheckbox方法，维护选中状态：

setCheckbox = (e, itemData) => {
  let { checkboxes } = this.state;
  const checkboxId = itemData.id;
  
  // 切换选中状态：已选中则移除，未选中则添加
  const updatedCheckboxes = checkboxes.includes(checkboxId)
    ? checkboxes.filter(id => id !== checkboxId)
    : [...checkboxes, checkboxId];
  
  this.setState({ checkboxes: updatedCheckboxes });
  console.log('当前选中的复选框ID:', updatedCheckboxes);
}

2. 阻止事件冒泡（备选方案，不推荐） #

如果出于某些原因你必须使用onClick，可以在事件处理函数中添加e.stopPropagation()来阻止事件向上冒泡，避免被父元素重复触发：

setCheckbox = (e, itemData) => {
  e.stopPropagation(); // 阻止事件冒泡
  let { checkboxes } = this.state;
  console.log('ITEMM!!!', itemData)
}

不过还是强烈推荐用onChange，因为它是Semantic-UI React为复选框量身设计的事件，更贴合组件的使用场景，也能避免后续可能出现的其他兼容问题。

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