如何将日期的默认值设为空？

Question

我创建了一个简单的单选按钮，如果用户选择

yes

，它将显示附加输入字段，并且我创建了一个函数，如果用户选择

no

，则将清空字段。

schema.ts

：

const formSchemaData = z.object({
    doesHaveDryRun:  z.enum(["yes", "no"], {
      required_error: "Please select if yes or not"
    }),
    dryRunDate: z.date().optional(),
    dryRunStart: z.string().optional(),
    dryRunEnd: z.string().optional(),
})

form.ts

：

  const form = useForm<Inputs>({
    resolver: zodResolver(formSchemaData),
    defaultValues: {
      doesHaveDryRun: "no",
      dryRunDate: new Date() : "",  
      dryRunStart: "",
      dryRunEnd: "",
  
    },
  });

因此，在

none/no

的单选按钮中，我添加了一个手柄单击，如果选择该按钮，则会清空附加字段。

     const handleClick = () => {
        form.resetField("dryRunDate");
        form.resetField("dryRunStart");
        form.resetField("dryRunEnd");
      };

return (

    <FormField
      control={form.control}
      name="doesHaveDryRun"
      render={({ field }) => (
        <FormItem className="space-y-3">
          <FormLabel>(Optional) Preferred Meeting Date / Dry Run</FormLabel>
          <FormControl>
            <RadioGroup
              onValueChange={field.onChange}
              defaultValue={field.value}
              className="flex flex-col space-y-1"
            >
              <FormItem className="flex items-center space-x-3 space-y-0">
                <FormControl>
                  <RadioGroupItem onClick={handleClick} value="no" />
                </FormControl>
                <FormLabel className="font-normal">None / No</FormLabel>
              </FormItem>
              <FormItem className="flex items-center space-x-3 space-y-0">
                <FormControl>
                  <RadioGroupItem value="yes" />
                </FormControl>
                <FormLabel className="font-normal">Yes</FormLabel>
              </FormItem>
            </RadioGroup>
          </FormControl>
    
          {hasDryRun === "yes" && (
            <FormItem>
              <div className="flex flex-col gap-2 pt-2">
                <Label>(Dry Run) Time of Event</Label>
                <div className="flex flex-col gap-2">
                  <FormField
                    control={form.control}
                    name="dryRunDate"
                    render={({ field }) => (
                      <FormItem className="flex flex-col">
                        <FormLabel>Date</FormLabel>
                        <Popover>
                          <PopoverTrigger asChild>
                            <FormControl>
                              <Button
                                variant={"outline"}
                                className={cn(
                                  "w-[240px] pl-3 text-left font-normal",
                                  !field.value && "text-muted-foreground"
                                )}
                              >
                                {field.value ? (
                                  format(field.value, "PPP")
                                ) : (
                                  <span>Pick a date</span>
                                )}
                                <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                              </Button>
                            </FormControl>
                          </PopoverTrigger>
                          <PopoverContent className="w-auto p-0" align="start">
                            {/* Customized Calendar */}
    
                            <Calendar
                              mode="single"
                              disabled={(date) => new Date(date) <= new Date()} // Disable past dates and today's date
                              selected={field.value || undefined}
                              onSelect={field.onChange}
                              initialFocus
                            />
                          </PopoverContent>
                        </Popover>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={form.control}
                    name="dryRunStart"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Dry Run Starting Time</FormLabel>
                        <Select
                          onValueChange={field.onChange}
                          defaultValue={field.value}
                        >
                          <FormControl>
                            <SelectTrigger>
                              <SelectValue placeholder="end of event" />
                            </SelectTrigger>
                          </FormControl>
                          <SelectContent>
                            <SelectGroup>
                              <SelectLabel>Morning</SelectLabel>
                              {timeAM.map((item, index) => (
                                <SelectItem key={index} value={item.time}>
                                  {item.time}
                                </SelectItem>
                              ))}
                            </SelectGroup>
    
                            <SelectGroup>
                              <SelectLabel>Afternoon</SelectLabel>
                              {timePM.map((item, index) => (
                                <SelectItem key={index} value={item.time}>
                                  {item.time}
                                </SelectItem>
                              ))}
                            </SelectGroup>
                          </SelectContent>
                        </Select>
    
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={form.control}
                    name="dryRunEnd"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Dry Run End Time</FormLabel>
                        <Select
                          onValueChange={field.onChange}
                          defaultValue={field.value}
                        >
                          <FormControl>
                            <SelectTrigger>
                              <SelectValue placeholder="end of event" />
                            </SelectTrigger>
                          </FormControl>
                          <SelectContent>
                            <SelectGroup>
                              <SelectLabel>Morning</SelectLabel>
                              {timeAM.map((item, index) => (
                                <SelectItem key={index} value={item.time}>
                                  {item.time}
                                </SelectItem>
                              ))}
                            </SelectGroup>
    
                            <SelectGroup>
                              <SelectLabel>Afternoon</SelectLabel>
                              {timePM.map((item, index) => (
                                <SelectItem key={index} value={item.time}>
                                  {item.time}
                                </SelectItem>
                              ))}
                            </SelectGroup>
                          </SelectContent>
                        </Select>
    
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>
              </div>
            </FormItem>
          )}
    
          <FormMessage />
        </FormItem>
      )}
    />;

)

但是我现在遇到的问题是，即使我点击

none/no

按钮，日期仍然被保存。

在此图像中，我选择了

yes

，因此它有一个输入，但是一旦我选择了

no

即使我使用

date

重置字段，我仍然得到

handleclick

，有什么办法可以使其为空或只是一个空字符串吗？

Answer 1

使用

setValue

而不是

resetField

。您想将值设置回

undefined

const handleClick = () => {
  form.setValue("dryRunDate", undefined);
  form.setValue("dryRunStart", undefined);
  form.setValue("dryRunEnd", undefined);
};