无法选择自定义复选框

Question

无法选中/取消选中自定义复选框。

说明：在注释掉 dispaly:none 时，我可以查看、选中、取消选中蓝色复选框。但是自定义的Checkbox是不能勾选或者不勾选的。

这是未显示蓝色复选框的预期输出。但是在选中或取消选中自定义复选框时遇到问题。感谢您的帮助。谢谢你。

Answer 1

就像您已经对 onChange 事件的输入类型复选框所做的那样，您还应该为执行相同操作的标签包含点击事件处理程序：

• onClick={handleSelectAll} 在第一个标签上
• onClick={() => onClickDOP(day)} 在其他标签上

    suggestionsListComponent = (
        <ul>
            <li>
            <Checkbox checked={selectAll} onChange={handleSelectAll} />
            <label
                className="custom-checkbox-label"
                onClick={handleSelectAll}>  <--------
                All
            </label>
            </li>
            {filteredSuggestions.map((day: any, index: any) => {
            return (
                <li key={day.id}>
                <input
                    type="checkbox"
                    className=""
                    name={day?.name}
                    value={day?.name}
                    checked={day.active}
                    onChange={() => onClickDOP(day)}
                />
                <label
                    className="custom-checkbox-label"
                    onClick={() => onClickDOP(day)}  <--------
                >
                    {day?.name}
                </label>
                </li>
            );
            })}
        </ul>
    );