dimanche 25 juin 2017

Handle check/uncheck multiple checkboxes - React

enter image description here

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

How do I handle the checkbox check uncheck when my html is made dynamically based on conditions in React. Using state might be very cubersome because of multiple checkboxes any help?

Please help would be greatful




Aucun commentaire:

Enregistrer un commentaire