反应，为什么标签不发射onChange复选框？

Question

我觉得我已经做了这一百万次，但可能没有映射函数。我有我要创建的复选框活动集合的代码如下（__map从Lodash过来的方式）：

<div className="activity-blocks"> 
{ 
    __map(this.state.activities, (activity, i) => { 
     return (
      <div key={ i } className="single-activity"> 
       <input id={ `register-activity-${ i }` } 
        type="checkbox" className="register-multiselect" 
        name="main_activity" checked={ !!activity.checked } 
        onChange={ (e) => this.toggleActivity(e, activity.id) } 
       /> 
       <label htmlFor={ `register-activity-${ i }` }>{ activity.name }</label> 
      </div> 
     ) 
    }) 
} 

我onChange处理程序是这样的：

toggleActivity(e, activityId) { 
    let activities = { ...this.state.activities }; 

    __forEach(this.state.activities, (activity) => { 
     if (activityId === activity.id) { 
      activity = __assign(activity, { checked: e.target.checked }); 
      return false; 
     } 
    }); 

    this.setState({ activities: activities }); 
} 

该处理程序工作得很好，主要参考。我的问题是标签不会触发处理程序。我只测试了没有标签的复选框输入，并且它触发了处理程序。有谁知道为什么标签不这样做？

更多信息：我以前有过这个问题，但它通常是一个id不匹配或像这样简单的事情。这次我不相信。

---

编辑 我已经删除了几乎所有从我的文件中的代码并纳入下面Slawa的答案，它仍然没有按预期的行为。下面是代码，包括所有进口，阶级结构，并去掉了所有不必要的代码，包括样式：

import React from 'react'; 
import __forEach from 'lodash/forEach'; 
import __assign from 'lodash/assign'; 
import __map from 'lodash/map'; 

export default class RegisterActivities extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      activities: [ 
       { 
        id: 1, 
        name: 'label-1' 
       }, 
       { 
        id: 2, 
        name: 'label-2' 
       }, 
       { 
        id: 3, 
        name: 'label-3' 
       } 
      ], 
     } 
    } 

    toggleActivity(e, activityId) { 
     const { activities } = this.state; 

     const updated = activities.map((activity) => { 
      if (activity.id === activityId){ 
       return { 
        ...activity, 
        checked: e.target.checked 
       } 
      } 

      return activity; 
     }); 
    } 

    render() { 
     return (
      <div> 
       <p>what do you do?</p> 
       <div> 
       { 
        __map(this.state.activities, (activity, i) => { 
         return (
          <div key={ i }> 
           <input id={ `register-activity-${ i }` } 
            type="checkbox" 
            name="main_activity" checked={ !!activity.checked } 
            onChange={ (e) => this.toggleActivity(e, activity.id) } 
           /> 
           <label htmlFor={ `register-activity-${ i }` }>{ activity.name }</label> 
          </div> 
         ) 
        }) 
       } 
       </div> 
      </div> 
     ); 
    } 
} 

EDIT2 我玩弄，并决定replce onChange与onClick，现在我能点击实际复选框打toggleActivity。有没有人有关于onChange为什么不开火的想法？

Answer 1

这个问题的答案我问题被发现on this SO post。事实证明，我的标签的onClick事件（HTML/React的幕后，我自己没有编码）冒泡到父母，而不是处理输入。我需要通过做onClick={ e => e.stopPropagation() }来告诉标签停止传播。

Answer 2

我想，你有一个错误在你toggleActivity功能，活动的阵列，并尝试将其转换为对象，你可以在这里找到我的这个问题的完整的解决方案：https://codesandbox.io/s/wqyolw50vl

toggleActivity(e, activityId) { 
    const { activities } = this.state; 

    const updated = activities.map(activity => { 
     if (activity.id === activityId){ 
     return { 
      ...activity, 
      checked: !activity.checked 
     } 
     } 

     return activity; 
    }) 

    this.setState({ activities: updated }); 
    } 

Answer 3

我有这个相同的问题。这让我很生气，但是我和我的团队发现，他们告诉你在文档中使用的htmlFor必须有一些错误。我们从我们的复选框道具中删除它，现在它按预期运行，没有奇怪的副作用。我正在开放GH问题。我会与链接以后编辑/更新

没有工作

代码：我现在使用

<label htmlFor={`${label}-checkbox`} className={checked ? "checked data-filter-checkbox" : "data-filter-checkbox"} > 
    <input id={`${label}-checkbox`} type="checkbox" onChange={(event) => handleCheck(event)} value={label} name={label} checked={checked} /> 
    {label} 
    <span>{count}</span> 
</label> 

代码：

<label className={checked ? "checked data-filter-checkbox" : "data-filter-checkbox"} > 
    <input id={`${label}-checkbox`} type="checkbox" onChange={(event) => handleCheck(event)} value={label} name={label} checked={checked} /> 
    {label} 
    <span>{count}</span> 
</label>