时间戳

首页 > 解决方案 > React Hook Form V7 - Material UI 5 Autocomplete：延迟加载的值未验证

reactjs - React Hook Form V7 - Material UI 5 Autocomplete：延迟加载的值未验证

问题描述

我使用带有 Material UI 5 Autocomplete 输入的 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
      />
    )}
  />
  
[...]

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

编辑 React Hook Form V7 - Material UI 5 - 延迟加载的值未在自动完成中验证

标签： reactjsreact-hook-form

解决方案

您应该使用React Hook Form 提供Autocomplete的组件来包装 Material UI 。Controller有关详细信息，请参阅文档中的此部分。

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

这是更新的CodeSandbox。

推荐阅读