使用 react-hook-form 重置功能时，Material-UI 复选框不会重置

Question

我正在使用

"react-hook-form": "7.9.0",

和

"@material-ui/core": "4.11.4", .

我试图通过点击定期按钮，使用手动重置一些复选框reset （反应-钩形式的复位）的方法react-hook-form 。

出于某种原因，我可以在反应开发工具中看到“已检查”道具正在更改为 false，但 SwitchBase（v 图标）仍在。

你可以看到例子： 在这里

感谢您的时间。

Answer 1

MUI <Checkbox />组件用于设置value界面略有不同。 RHF 值必须使用checked道具设置。

一个重要的注意事项：您必须使用checked={!!value}设置该值，以避免在someCheckbox的defaultValue最初为undefined将组件从不受控制更改为受控制的警告。

export const Checkbox = ({
  name,
  label,
  control,
  labelPlacement,
  disabled,
  className
}) => {
  return (
    <FormControlLabel
      label={label}
      disabled={disabled}
      labelPlacement={labelPlacement}
      className={className}
      control={
        <Controller
          name={name}
          control={control}
          rules={{ required: true }}
          render={({ field: { value, ...field } }) => (
            <MuiCheckbox
              {...field}
              checked={!!value}
            />
          )}
        />
      }
    />
  );
};

Answer 2

controller钩子使用value （这是真/假）而不是checked （这是 Material-UI 的Checkbox期望的）来设置复选框的检查状态。

为了解决您的问题，您可以从field获取value （在 Controller 的 render 属性内）并将其设置为Checkbox的checked属性：

  control={
    <Controller
      name={name}
      control={control}
      rules={{ required: true }}
      render={({ field }) => <MuiCheckbox {...field} checked={field['value'] ?? false} /> }
    />
  }