反應，爲什麼標籤不發射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>