React Hook Form V7 + Material UI 5：未验证默认值

Question

我已经使用 Material UI 5.

配置了自动完成和 DatePicker 组件

如何添加 React Hook 表单支持？我的自动完成标记如下所示：

const { itemsIdFormHookRef, ...itemsIdFormHookRest } = register("itemsId", {
    required: true
});

<Autocomplete
    options={state.itemsList}
    getOptionLabel={(item) => (item.name ? item.name : "")}
    getOptionSelected={(option, value) =>
      value === undefined || value === "" || option.id === value.id
    }
    value={
      state.itemIdSelected
        ? state.itemsList.find(
            (item) => item.id === state.itemIdSelected
          )
        : ""
    }
    onChange={(event, items) => {
      if (items !== null) {
        dispatch({
          type: SET_ITEM_ID,
          payload: items.id
        });
      }
    }}
    renderInput={(params) => (
      <TextField
        {...params}
        {...itemsIdFormHookRest}
        label="items"
        margin="normal"
        variant="outlined"
        inputRef={itemsIdFormHookRef}
        error={errors.itemsId ? true : false}
        helperText={errors.itemsId && "item required"}
        required
      />
    )}
  />

附带的 codesandbox 示例与 react-hook-form V6 的工作方式非常相似。

但是使用 React hook form V7 我的默认值没有被验证：

https://codesandbox.io/s/react-hook-form-v7-material-ui-5-hz7j6

Answer 1

首先，在您的代码中：

const { itemsIdFormHookRef, ...itemsIdFormHookRest } = register(...);
const { fromFormHookRef, ...fromFormHookRest } = register(...);

register() 从来没有 returns itemsIdFormHookRef 或 fromFormHookRef 属性但它 returns 一个 ref 所以也许你的意思这是：

const { ref: itemsIdFormHookRef, ...itemsIdFormHookRest } = register(...);
const { ref: fromFormHookRef, ...fromFormHookRest } = register(...);

如果您希望 react-hook-form 验证您的默认值，您需要在调用 useForm 时将这些值传递给 defaultValues 属性而不是保留您的 initialState 在一个单独的变量中：

const {...} = useForm({
  defaultValues: {
    itemsId: 1,
    fromDate: new Date()
  }
});

React Hook Form V7 + Material UI 5：未验证默认值

React Hook Form V7 + Material UI 5: Default values not validated

reactjs

react-hook-form

现场演示