React-hook-form 上的组件值不会更新 - NextJS

Question

所以，我已经尝试了一切，但根本无法弄清楚这一点。 我有这个用 ShadCn Slider 制作的可重复使用的组件，

function SliderWithCounter({ min, max, step = 1, onChange, value }: any) {
  const [sliderValue, setSliderValue] = useState(min);

  const handleChange = (newValue: any) => {
    console.log("SliderWithCounter - newValue:", newValue);
    setSliderValue(newValue);
    onChange(newValue);
  };

  const handleIncrement = () => {
    setSliderValue(Math.min(sliderValue + step, max));
  };

  const handleDecrement = () => {
    setSliderValue(Math.max(sliderValue - step, min));
  };

  return (
    <div className="flex flex-row justify-between items-center gap-2 ">
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger type="button">
            <Slider
              value={[sliderValue]}
              defaultValue={[min]}
              max={max}
              step={step}
              onChange={handleChange}
              className="w-[250px] md:flex hidden"
            />
          </TooltipTrigger>
          <TooltipContent sideOffset={5}>{sliderValue}</TooltipContent>
        </Tooltip>
      </TooltipProvider>
      <div className="flex flex-row gap-2 items-center justify-center">
        <Button onClick={handleIncrement} variant={"outline"} type="button">
          +
        </Button>
        <Input
          value={sliderValue}
          className="md:w-[60px]"
          onChange={(e) => setSliderValue(e.target.value)}
        />
        <Button onClick={handleDecrement} variant={"outline"} type="button">
          -
        </Button>
      </div>
    </div>
  );
}
export default SliderWithCounter;

其 UI 部分工作完美，滑块移动，输入字段值更新，反之亦然。

但现在我将其导入到我的表单中：

 <FormField
                control={form.control}
                name="batchSize"
                render={({ field }) => {
                  return (
                    <FormItem>
                      <FormLabel className="flex flex-row items-center gap-2">
                        Batch size
                        <ToolTipComponent tooltipText="Number of images" />
                      </FormLabel>
                      <FormControl>
                        <SliderWithCounter
                          min={1}
                          max={20}
                          onChange={(value: any) => {
                            console.log("FormField - onValueChange:", value);
                            field.onChange(value);
                          }}
                          step={1}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  );
                }}
              />

formSchema:  batchSize: z.array(z.number()),

默认值为

batchSize: [],

现在表单的 onChange 永远不会触发，我永远看不到 console.log，我希望更新值以在我的表单中使用，但我不知道如何解决这个问题。感谢您的帮助！

Answer 1

您必须使用

Slider

，如下所示：

<Slider
  value={[sliderValue]}
  defaultValue={[min]}
  max={max}
  step={step}
  onValueChange={handleChange}
  className="w-[250px] md:flex hidden"
/>

变化：

• 您必须在本机 shadcn Slider 组件上使用

  onValueChange

  而不是

  onChange

在这里您可以了解更多相关信息