React/Next.js中如何实现勾选复选框后显示优惠码输入框

你的思路是对的，通过React条件渲染即可实现需求，完全不需要用CSS控制显隐。结合你项目中已经使用的react-hook-form，不需要额外新增本地状态，直接用库提供的能力就能实现，未勾选时优惠码输入框不会挂载到DOM，完全满足要求。

修改步骤 #

• 从useForm返回值中解构出watch方法，用于监听表单字段实时值；如果需要取消勾选时自动清空已输入的优惠码，额外解构resetField方法
• 将原优惠码复选框的注册字段名从无意义的checkbox改为语义化的hasPromoCode，方便识别
• 调用watch("hasPromoCode")获取复选框的实时选中状态
• 使用&&运算符做条件判断，仅当复选框为选中状态时，才渲染优惠码输入框组件
• （可选）增加副作用逻辑：当复选框从选中变为未选中时，清空优惠码字段已输入的内容，避免提交无效数据

关键修改代码 #

首先修改useForm初始化部分：

const {
  register,
  formState: { errors },
  handleSubmit,
  control,
  setValue,
  watch,
  resetField, // 可选，用于清空字段值
} = useForm<LeadFormAnswers>();

// 监听优惠码复选框的选中状态
const showPromoCodeInput = watch("hasPromoCode");

// 可选：取消勾选时自动清空优惠码输入内容
React.useEffect(() => {
  if (!showPromoCodeInput) {
    resetField("promoCode");
  }
}, [showPromoCodeInput, resetField]);

然后修改表单中优惠码区域的JSX：

<VStack gap={6} alignItems="flex-start" px={[5, 8]}>
  <FormCheckbox
    mt={6}
    label={promoCodeText}
    registerProps={register("hasPromoCode")}
  >
    {promoCodeText}
  </FormCheckbox>
  {/* 条件渲染：仅勾选时挂载优惠码输入框 */}
  {showPromoCodeInput && (
    <Row>
      <FormInput
        w="full"
        label={promoCodeLabel}
        registerProps={register("promoCode")}
      />
    </Row>
  )}
</VStack>

实现逻辑说明 #

• 该方案是React原生的条件渲染实现，不满足渲染条件时，优惠码输入框对应的DOM节点完全不会生成，没有使用任何CSS显隐属性，符合要求
• 状态完全由react-hook-form统一管理，不需要额外维护useState，和表单提交、校验逻辑天然打通，后续如果要加「勾选时优惠码为必填」的规则，也可以直接结合表单的动态校验能力实现，不需要额外写状态同步逻辑

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