点击Livestream复选框打开InputField后，点击其他复选框为何关闭？

问题场景 #

使用Shadcn开发表单功能，需求是点击Livestreaming复选框时打开对应的输入框，但实际操作中，点击其他复选框时输入框会自动关闭。

原因分析 #

在CheckboxAppointmentFormService组件的Checkbox回调逻辑里，每次点击任意复选框都会执行setInputDataService(checked && item.id === "6")：

• 当点击的是Livestreaming（id=6）以外的复选框时，无论该复选框是选中还是取消，checked && item.id === "6"的结果都是false，会直接把openWebinar设为false，导致输入框被关闭。

解决方案 #

我们需要调整状态更新逻辑，基于当前所有选中的复选框集合来判断是否显示输入框，而不是仅依赖当前点击的单个复选框。

修改CheckboxAppointmentFormService.tsx中Checkbox的onCheckedChange回调：

<Checkbox
  checked={field.value?.includes(item.id)}
  onCheckedChange={(checked) => {
    // 计算新的选中值数组
    let newSelectedValues;
    if (Array.isArray(field.value)) {
      newSelectedValues = checked
        ? [...field.value, item.id]
        : field.value.filter((value) => value !== item.id);
    } else {
      newSelectedValues = checked ? [item.id] : [];
    }
    // 更新表单字段值
    field.onChange(newSelectedValues);
    // 根据新的选中数组判断是否显示输入框
    setInputDataService(newSelectedValues.includes("6"));
  }}
/>

逻辑说明 #

修改后，输入框的显示状态完全由选中的复选框集合决定：

• 只要选中列表中包含Livestreaming（id=6），输入框就保持打开
• 只有当Livestreaming被取消选中时，输入框才会关闭
• 点击其他复选框不会影响输入框的显示状态，除非这些操作导致Livestreaming被取消选中

内容的提问来源于stack exchange，提问作者Stykgwar