反应，为什么标签不触发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错配或类似的简单问题。这次我不相信。

编辑我已经删除了我的文件中的几乎所有代码，并在下面包含了斯拉瓦的答案，它仍然没有像预期的那样运行。下面是包含所有导入、类结构和所有不必要的代码的代码，包括样式：

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我正在玩，决定用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>