使用 Controller 时 react-hook-form 未触发 onSubmit

Question

我有以下表格：

      <form onSubmit={handleSubmit(onSubmit)}>
        <Controller
          name="voucherPrice"
          control={control}
          defaultValue={false}
          rules={{ required: true }}
          render={({ field: { onChange, value, ref } }) => (
            <Input {...field} onChange={(ev) => handlePriceInputChange(ev)} value={price} type="number" innerRef={ref} />
          )}
        />

        <p>{errors.voucherPrice?.message}</p>

        <Button
          variant="contained"
          sx={{ mt: 1, mr: 1 }}
          type="submit"
        >
          {"Continue"}
        </Button>
      </form>

并使用此配置：

function PriceSelection(props) {
  const {
    register,
    handleSubmit,
    control,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
  });
  const onSubmit = (data) => {
    console.log("does not work?", data);
  };

  const classes = useStylesPriceSelection();
  const [selected, setSelected] = useState(false);
  const [price, setPrice] = useState("");


  const handlePriceInputChange = (ev) => {
    console.log("change", price);
    setPrice(parseInt(ev.target.value));
  };

当我按下提交按钮时，函数onSubmit 没有触发。此外，我希望输入字段默认填充状态price，并且当我按下提交按钮时，它的值将与函数onSubmit 上的参数data 一起发送。

Answer 1

您将useState 与react-hook-form 混合在一起，并且没有更新react-hook-form 的内部表单状态。您无需为您的字段声明useState。

在您的示例中，您正在从<Controller /> 的field 对象中解构onChange，但您从未将它用于您的<Input /> 组件。因此react-hook-form 不能更新它的表单状态。当您将字段设置为必填时，不会触发 onSubmit 回调，因为 react-hook-form 永远不会收到它的更新或值。

正确的方法是：

<Controller
  name="voucherPrice"
  control={control}
  rules={{ required: true }}
  render={({ field: { ref, onChange, value, ...field } }) => (
    <Input {...field} onChange={onChange} value={value} type="number" innerRef={ref} />
  )}
/>

甚至更短：

<Controller
  name="voucherPrice"
  control={control}
  rules={{ required: true }}
  render={({ field: { ref, ...field } }) => (
    <Input {...field} type="number" innerRef={ref} />
  )}
/>

更新

如果您需要访问<Controller /> 之外的值，您应该使用react-hook-form 的watch 方法。这将允许您订阅 voucherPrice 字段的最新值并在组件中使用它 -> Docs

如果您想以编程方式设置或更新值，您可以使用来自react-hook-form 的setValue 方法 -> Docs

const { control, handleSubmit, watch, setValue } = useForm();

const voucherPrice = watch("voucherPrice");

const onButtonClick = () => {
  setValue("voucherPrice", <newValue>);
}

如果您确实需要为您的值设置一个单独的 useState 并希望将其另外更新为您的 react-hook-form 字段更新，您可以执行以下操作：

<Controller
  name="voucherPrice"
  control={control}
  rules={{ required: true }}
  render={({ field: { ref, onChange, value, ...field } }) => (
    <Input
      {...field}
      onChange={(v) => {
        onChange(v);
        handlePriceInputChange(v);
      }}
      value={value}
      type="number"
      innerRef={ref}
    />
  )}
/>

但我建议仅使用 react-hook-form 解决方案，因为它具有管理表单状态所需的所有功能。