如何在幻灯片中使用自动完成功能？

Question

我有一个

useAutocomplete

，我在

Slide

MUI 组件中实现：

<Slide
  in={isOpen}
  timeout={{ enter: 300, exit: 200 }}
  mountOnEnter
  unmountOnExit
>
  <div {...getRootProps()}>
    <TextField
      variant="outlined"
      label="search"
      size="small"
      value={searchInput}
      autoFocus
      onChange={(e) => setSearchInput(e.target.value)}
      InputLabelProps={{ ...getInputLabelProps() }}
      inputProps={{ ...getInputProps() }}
      InputProps={{
        endAdornment: (
          <InputAdornment position="end">
            <SearchIcon />
          </InputAdornment>
        ),
      }}
    />
    <List {...getListboxProps()}>{optionsList}</List>
  </div>
</Slide>

当

isOpen

（prop）为 false 时，我收到此错误：

找不到输入元素。当需要 HTMLInputElement 时，它被解析为 null。相反，useAutocomplete 需要一个输入元素。确保您已正确绑定 getInputProps 并保证正常的引用/效果解析顺序。*

如何解决此错误，同时保留幻灯片提供的动画？

Answer 1

首先，请注意您正在使用的某些 API 已被弃用。参考这个

所以，这部分代码现在应该是，其中 slotProps 是 TextField 的 prop：

slotProps={{
  inputLabel: { ...getInputLabelProps() },
  htmlInput: { ...getInputProps() },
  input: {
    endAdornment: (
      <InputAdornment position="end">
        <SearchIcon />
      </InputAdornment>
    ),
  },
}}

然后，我检查了错误并测试了渲染。原因可能是组件开始在服务器上渲染（例如，如果您正在使用服务器组件），因此引用存在边界问题。相反，您可能必须将组件移动到客户端文件并在未设置 SSR 的情况下导入它