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

IT技术 reactjs react-hook-form
2021-05-15 08:41:01

我使用带有 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
      />
    )}
  />
  
[...]

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

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

2个回答

您应该Autocomplete使用ControllerReact Hook Form 提供的Component包装 Material UI 。有关更多信息，请参阅文档中的这一部分。

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

这是更新的CodeSandbox。

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

<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>
其它你可能感兴趣的问题
上一篇从 PSU 到控制器的可接受电压降是多少？ 下一篇挤出机端口的新用途