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

Question

我在用着

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

和

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

我试图通过单击常规按钮并使用 的reset( react-hook-form reset ) 方法来手动重置某些复选框react-hook-form。

由于某种原因，我可以在 React 开发工具中看到“checked”属性更改为 false，但 SwitchBase（v 图标）仍然打开。

你可以看到例子：在这里

感谢您的时间。

Answer 1

MUI<Checkbox />组件用于设置value. RHF 值必须使用checkedprop 设置。

一个重要的注意事项：您必须设置值 ，以避免在您的for最初为checked={!!value}时出现有关将组件从不受控更改为受控的警告。defaultValuesomeCheckboxundefined

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}
            />
          )}
        />
      }
    />
  );
};