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 我正在玩，并决定用onChange重新onClick，现在我可以点击实际复选框以点击toggleActivity。有没有人知道为什么onChange没有开火？

Answer 1

我认为，你的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 2

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

Answer 3

我遇到了同样的问题。这让我很生气，但是我和我的团队发现，他们告诉你在文档中使用的htmlFor必定存在一些错误。我们从我们的复选框prop中删除它，现在它按预期运行，没有奇怪的副作用。我正在打开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>

Code I现在使用：

<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>

React，为什么标签没有触发onChange为复选框？

3 个答案: