ハンドル/チェックを外して、複数のチェックボックスをチェック - 私のHTMLがリアクトの状況に基づいて動的に行われたとき、私は、チェックボックスのチェックのチェックを外しを処理するにはどうすればよい

Question

getEmailUserRows() { 
    let emailRows = this.props.emailRows 
    let emailTemplate = emailRows.map((row) => { 
     return (
      <tr key={row.email}> 
       <td height="70"> 
        <span class="txt-limit"> 
         <small>{row.email}</small> 
        </span> 
       </td> 
       <td class="no-spc" height="70"> 
        <span class="pure-checkbox tog-check"> 
         <input 
          id="sttng1" 
          name="sttng1" 
          type="checkbox" 
          checked={row.emailCategoryList.transactionalEmails}/> 
         <label for="sttng1"></label> 
        </span> 
       </td> 
       <td class="no-spc" height="70"> 
        <span class="pure-checkbox tog-check"> 
         <input 
          id="sttng2" 
          name="sttng2" 
          type="checkbox" 
          checked={row.emailCategoryList.settlementEmails}/> 
         <label for="sttng2"></label> 
        </span> 
       </td> 
       <td class="no-spc" height="70"> 
        <span class="pure-checkbox tog-check"> 
         <input 
          id="sttng3" 
          name="sttng3" 
          type="checkbox" 
          checked={row.emailCategoryList.crmEmails}/> 
         <label for="sttng3"></label> 
        </span> 
       </td> 
       <td class="no-spc" height="70"> 
        <span class="pure-checkbox tog-check"> 
         <input 
          id="sttng4" 
          name="sttng4" 
          type="checkbox" 
          checked={row.emailCategoryList.onboardingEmails}/> 
         <label for="sttng4"></label> 
        </span> 
       </td> 
       <td class="no-spc" height="70"> 
        <span class="pure-checkbox tog-check"> 
         <input 
          id="sttng5" 
          name="sttng5" 
          type="checkbox" 
          onChange={this.handleChange} 
          checked={row.emailCategoryList.otherEmails}/> 
         <label for="sttng5"></label> 
        </span> 
       </td> 
       <td class="no-spc" height="70"> 
        <span class="icon-delete"></span> 
       </td> 

      </tr> 
     ) 
    }) 

    return emailTemplate 

} 
handleChange(event){ 
event.target.checked = false 
debugger; 
} 

を反応します。複数のチェックボックスがあるため、状態を使用するのは非常に立派です。

Answer 1

状態を使用してください。私がそれをしている間、Re​​duxを使用して状態を保存することは素晴らしい考えです。あなたがどのように状態を保持しているかに関係なく、混乱を心配している場合は、checkboxのIDとなるキー全体のチェックボックスグループに対して辞書を使用できます。

私はあなたのコードにコメントしていますが、共通点はありますが、それが不完全であるかどうかわからないのはやや難しいです。 row.emailCategoryList.crmEmailsが真または偽と評価された場合、これが確認されていない問題として、あなたのチェックボックスのすべてをレンダリングします

checked={row.emailCategoryList.crmEmails} 

：状態に応じてチェックボックスをチェックするか、オフにあなたのコードは次のようなものです。チェックボックスをオフにしたい場合は、チェックされたattributteを完全に省略する必要があります。