处理选中/取消选中多个复选框 - React答案

【问题标题】：Handle check/uncheck multiple checkboxes - React处理选中/取消选中多个复选框 - React
【发布时间】：2018-05-16 01:53:01
【问题描述】：

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

当我的 html 是根据 React 中的条件动态创建时，我如何处理复选框检查取消选中。由于多个复选框，使用状态可能非常麻烦？

请帮助将是很大的

【问题讨论】：

使用state。对许多项目使用状态并不麻烦。现在你的代码很麻烦。它甚至没有正确使用id，因为它会在每一行中重复。
首先将列声明为数组，例如const columns = [{label: 'Transactional Emails', name: 'transactionalEmails'}, ...]。这应该可以帮助您从代码中删除重复的模式。这同样适用于state。这很容易实现。
@Sulthan 是的，我会补充一点，这是一个基本代码将删除它。

标签： reactjs checkbox foreach

【解决方案1】：

使用状态。虽然我正在使用它，但使用 Redux 来存储状态将是一个好主意。不管你如何保持状态，如果你担心混乱，你可以使用字典来处理整个复选框组，其中键是复选框的 id。

虽然我在评论你的代码有一个共同的（但如果你不知道的话有点难以弄清楚）缺陷。根据状态检查或取消选中复选框的代码如下所示：

checked={row.emailCategoryList.crmEmails}

无论row.emailCategoryList.crmEmails 的计算结果为真还是假，这都会将您的所有复选框呈现为选中状态。如果您想取消选中复选框，则必须完全省略选中的属性。

【讨论】：