RHF 不重置 MUI 复选框组中的值

Question

我正在尝试使用 reset() 方法重置我的表单，并且它正在部分工作。表单的所有字段都会重置，复选框组除外。

我已经尝试了三种不同的方式来实现 MUI CheckboxesGroup，但是，我总是得到相同的结果。

你可以在这个 sandbox

中看到一个工作示例

复选框一实现

<FormControl error={error} required={required} component="fieldset">
      <FormLabel component="legend">{label}</FormLabel>
      <Controller
        name={name}
        render={({ field: { onBlur: rhfonBlur, onChange: rhfonChange } }) => (
          <FormGroup onBlur={rhfonBlur}>
            {Object.keys(options).map((key) => {
              return (
                <FormControlLabel
                  label={key}
                  key={key}
                  control={
                    <Checkbox onChange={(e) => rhfonChange(handleCheck(key))} />
                  }
                />
              );
            })}
          </FormGroup>
        )}
        control={control}
      />
      <FormHelperText>{helperText}</FormHelperText>
    </FormControl>

复选框二实现

<FormControl error={error}>
      <FormLabel component="legend">{label}</FormLabel>
      <FormGroup>
        {Object.keys(options).map((key) => {
          return (
            <FormControlLabel
              key={key}
              control={<Checkbox {...register(name)} />}
              value={key}
              label={key}
            />
          );
        })}
      </FormGroup>
      <FormHelperText>{helperText}</FormHelperText>
    </FormControl>

复选框三实现

<FormControl required error={error} component="fieldset" variant="standard">
      <FormLabel component="legend">{label}</FormLabel>
      <Controller
        control={control}
        name={name}
        render={({ field: { onChange: rfhonChange, value } }) => {
          // console.log("value:", value);
          return (
            <FormGroup>
              {Object.keys(state).map((key) => {
                return (
                  <FormControlLabel
                    label={key}
                    key={key}
                    control={
                      <Checkbox
                        onChange={(e) => {
                          rfhonChange(handleChange(e));
                        }}
                        checked={state[key]}
                        name={key}
                      />
                    }
                  />
                );
              })}
            </FormGroup>
          );
        }}
      />
      <FormHelperText>{helperText}</FormHelperText>
    </FormControl>

Answer 1

您的第三个实现是使用 RHF 的 <Controller /> 组件的正确方法。它不起作用的原因如下：

您没有为您的字段更新 RHF 的内部状态，因为您只是将一个函数传递给 onChange 处理程序。这里不需要额外使用useState
您的初始值是一个布尔值 (false) 但您在 <CheckboxThree /> 组件中使用了一个对象

所以基本上你可以将组件简化为以下内容（在你的例子中，不清楚字段值应该是一个对象还是一个包含所选选项的数组 - 所以我做的例子是使用数组):

const CheckboxThree = ({
  control,
  error,
  helperText,
  label,
  name,
  options
}) => {
  return (
    <FormControl required error={error} component="fieldset" variant="standard">
      <FormLabel component="legend">{label}</FormLabel>
      <Controller
        control={control}
        name={name}
        render={({ field: { onChange, value, ref, ...field } }) => (
          <FormGroup>
            {Object.keys(options).map((key) => {
              return (
                <FormControlLabel
                  label={key}
                  key={key}
                  control={
                    <Checkbox
                      {...field}
                      name={key}
                      checked={value.some((option) => option === key)}
                      onChange={(event, checked) => {
                        if (checked) {
                          onChange([...value, event.target.name]);
                        } else {
                          onChange(
                            value.filter((value) => value !== event.target.name)
                          );
                        }
                      }}
                      inputRef={ref}
                    />
                  }
                />
              );
            })}
          </FormGroup>
        )}
      />
      <FormHelperText>{helperText}</FormHelperText>
    </FormControl>
  );
};

RHF 不重置 MUI 复选框组中的值

RHF not resetting values in an MUI checkbox group

reactjs

material-ui

react-hook-form