React Hook Form V7 - Material UI 5 自动完成：延迟加载值未验证

Question

我使用带有 Material UI 5 自动完成输入的 react-hook-form V7。我在自动完成中延迟加载的值在第一次提交点击时未被验证（但在第二次）。怎么了？


  useEffect(() => {
    setItemList([
      { id: 1, name: "item1" },
      { id: 2, name: "item2" }
    ]);
    setItemIdSelected(2);
  }, []);

  [...]

  <Autocomplete
    options={itemList}
    getOptionLabel={(item) => (item.name ? item.name : "")}
    getOptionSelected={(option, value) =>
      value === undefined || value === "" || option.id === value.id
    }
    value={
      itemIdSelected
        ? itemList.find((item) => item.id === itemIdSelected)
        : ""
    }
    onChange={(event, items) => {
      if (items !== null) {
        setItemIdSelected(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
      />
    )}
  />
  
[...]

请查看代码沙盒上的代码：

Answer 1

你应该用 React Hook Form 提供的 Controller 组件包裹 Material UI Autocomplete。有关详细信息，请参阅文档中的 section。

我还建议删除 useState 保存 id，因为您还可以通过 getValues 或 [=15= 之后通过 React Hook Form 访问该值]回调被调用。

这是更新后的 CodeSandbox。

Answer 2

如何实现日期选择器？这仅适用于模态，但当您自己输入时不起作用。

<LocalizationProvider dateAdapter={AdapterDateFns} locale={ruLocale}>
  <Controller
    render={({ field }) => (
      <DatePicker
        value={field.value}
        onChange={(value) => field.onChange(value)}
        renderInput={(params) => (
          <TextField {...params} />
        )}
      />
    )}
    name={name}
    control={control}
  />
</LocalizationProvider>

React Hook Form V7 - Material UI 5 自动完成：延迟加载值未验证

React Hook Form V7 - Material UI 5 Autocomplete: Lazy loaded values not validated

reactjs

react-hook-form