React、なぜラベルは発射しないのですか？チェックボックスを変更しますか？

Question

私はこれを何百万回もやったような気がしますが、おそらくマッピング機能ではないでしょう。

：

<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ハンドラは次のようになります。コードは次のようであると私は（__mapは途中でLodashから来ている）私は、チェックボックスを作成しています活動のコレクションを持っています

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 私が遊んとonClickでonChangeをreplceすることを決定し、今私ができるよよ：ここでは、すべての輸入品を含むコード、クラス構造やスタイルを含め取り除かすべての不要なコードは、あります実際のチェックボックスをクリックして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> 

はコード：：そのcatchのための

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