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

如何根据React中的条件动态制作html时，如何处理复选框选中取消选中。由于多个复选框有任何帮助，使用状态可能非常简单吗？

请帮助将是非常好的

Answer 1

使用状态。虽然我在使用Redux来存储状态是个好主意。无论你如何保持状态，如果你担心混乱，你可以使用整个复选框组的字典，其中键是复选框的id。

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

checked={row.emailCategoryList.crmEmails}

无论row.emailCategoryList.crmEmails评估为true还是false，这都会将所有复选框都显示为已选中。如果您希望取消选中复选框，则必须完全省略选中的attributte。

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

1 个答案: