我正在使用

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

和

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

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

出于某种原因，我可以在 React 开发工具中看到“checked”属性变为 false，但 SwitchBase(v 图标)仍然打开。

你可以看到例子:Over here

感谢您的宝贵时间。

最佳答案

MUI <Checkbox />组件有一个稍微不同的界面来设置 value . RHF 值必须设置为 checked Prop 。

重要提示:您必须使用 checked={!!value} 设置值避免在您的 defaultValue 将组件从不受控更改为受控时发出警告对于 someCheckbox最初是 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}
            />
          )}
        />
      }
    />
  );
};

关于javascript - 使用 react-hook-form 重置功能时，Material-UI 复选框不会重置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68228030/