反应，为什么标签不为复选框触发 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>
        );
    }
}

编辑2 我在玩，决定用onClick 替换onChange，现在我可以点击实际的复选框来点击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>