Material UI 开关输入在表单重置时未更新

Question

我正在用来react-hook-form构建我的表单，它是一个很棒的工具。但是，我似乎无法<Switch />根据 redux 的返回值让元素滑动（假/真）。当我单击表单上的“重置”时，我的所有输入都会重置。我的 Switch 控件不会重置，它们仍然停留在最后一个值，无论它是否可能被重置。关于如何解决这个问题有什么想法吗？

我的开关

<FormControlLabel
  control={
    <Switch
      size="medium"
      name="familyFriendly"
      defaultChecked={formState.content.isFamilySafe}
      {...register('content.isFamilySafe')}
    />
  }
  label="Family Friendly"
/>

复位按钮

   <button
        type="button"
        onClick={() => {
          reset(formState, {
            keepErrors: true,
            keepDirty: true,
            keepIsSubmitted: false,
            keepTouched: false,
            keepIsValid: false,
            keepSubmitCount: false,
          });
        }}
      >
        reset
      </button>

使用表单钩子

  const formState = useSelector(selectDynamicForm);
  const {
    register,
    control,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm<IFormInput>({});

Answer 1

MUI 的组件对于使用而不是<Switch />实际值的界面略有不同。RHF返回一个您在组件上传播的属性，因此RHF 和组件之间永远不会链接checkedvalueregistervalue<Switch />checked<Switch />。

所以你应该使用RHF的<Controller />组件来控制这个外部受控组件。请点击此处了解更多信息。

<FormControlLabel
    control={
      <Controller
        control={control}
        name="content.isFamilySafe"
        render={({ field: { value, ...field } }) => (
          <Switch {...field} checked={!!value} size="medium" />
        )}
      />
    }
    label="Family Friendly"
/>

您还需要设置defaultValue输入通过，useForm因为这是reset正常工作所必需的。来自文档：

如果您的表单将使用默认值调用reset，则您将需要调用 useForm withdefaultValues而不是defaultValue在各个字段上设置。