使用 react-hook-form 在 React 中引入其他值时如何重置其他值答案

【问题标题】：How to reset other values when one is introduced in React with react-hook-form使用 react-hook-form 在 React 中引入其他值时如何重置其他值
【发布时间】：2022-01-11 18:26:15
【问题描述】：

拥有此验证架构：

const schema = yup.object().shape({
  second: yup.number(),
  minute: yup.number(),
  triggerName: yup.string().required()
});

应该需要triggerName，但是当我为minute 输入写东西时，second 输入应该重置，反之亦然。

const { handleSubmit, register, reset } = useForm({ resolver: yupResolver(schema) });

...

<Input inputId='second' type='number' {...register('second')} />
<Input inputId='minute' type='number' {...register('minute')} />
<Input inputId='trigger-name' label='triggerName' {...register('triggerName')} />

尝试执行以下操作，但会引发错误：

<Input inputId='second' type='number' {...reset(), register('second')} />

【问题讨论】：

标签： javascript reactjs typescript react-hooks react-hook-form

【解决方案1】：

register 返回一个具有以下结构的对象：

{ 
  onChange: function(){},
  onBlur: function(){},
  ref: function(){}
}

目前您只是传递从register 函数返回的对象，但您可以向输入的onChange 添加一些其他功能，如下例所示（这里我们通过调用来重置表单中的另一个字段resetField):

const Input = React.forwardRef(({ inputId, ...otherProps }, ref) => {
  return <input id={inputId} ref={ref} {...otherProps} />;
});

const schema = yup.object().shape(
  {
    second: yup
      .number()
      .nullable()
      .transform((value, originalValue) =>
        String(originalValue).trim() === '' ? null : value
      ),
    minute: yup
      .number()
      .nullable()
      .transform((value, originalValue) =>
        String(originalValue).trim() === '' ? null : value
      ),
    triggerName: yup.string().required(),
  }
);

function TestForm() {
  const {
    handleSubmit,
    register,
    formState: { errors },
    resetField,
  } = useForm({
    resolver: yupResolver(schema),
  });

  console.log(errors);

  const onSubmit = (data) => {
    if (!data.minute && !data.second) {
      alert('on of minute or second field must has value');
      return false;
    }
    alert('success');
    console.log(data);
  };

  const { onChange: onSecondChange, ...secodField } = register('second');
  const { onChange: onMinuteChange, ...minuteField } = register('minute');

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Input
          inputId="second"
          type="number"
          {...secodField}
          onChange={(e) => {
            onSecondChange(e);
            resetField('minute');
          }}
        />
      <Input
        inputId="minute"
        type="number"
        {...minuteField}
        onChange={(e) => {
          onMinuteChange(e);
          resetField('second');
        }}
      />
      <Input
        inputId="trigger-name"
        label="triggerName"
        {...register('triggerName')}
      />
      <input type="submit" value="submit" />
    </form>
  );
}

我已验证 minute 或 second 在 onSubmit 函数中具有价值，因为我不完全了解您的业务关于填写两者或其中之一，但如果您愿意，您可以通过以下方式处理此验证yup 通过使用 when 方法或在您的架构上定义一些自定义规则。

【讨论】：

我正在尝试实施您的解决方案，但它似乎无法识别resetField：“UseFormReturn”类型上不存在属性“resetField”。ts(2339)
作为替代方案，您可以使用reset 方法，而不是调用resetField("minute") 或resetField("second")，您可以使用reset({minute: ''}) 或reset({second: ''})
@LeoMessi 但我相信如果您将react-hook-form 版本更新到最新版本，您的问题将通过resetField 类型错误解决。
@LeoMessi 你的类型问题解决了吗？
不客气。

【解决方案2】：

从 useForm 钩子中导入 setValue 并在输入上设置 onChange 函数您可以为每个输入执行此操作，并对 onChange 有不同的行为

const {
 handleSubmit, 
 setValue, 
 register, 
 reset 
} = useForm({ resolver: yupResolver(schema) });

const onChangeMyInput = (e) => {
 reset()
 setValue('second', e.target.value)
}


<Input 
 {...register('second')} 
 onChange={onChangeMyInput}
 inputId='second' 
 type='number' 
/>

【讨论】：

这个解决方案不起作用