reactjs - 通过表单自动完成

Question

我打算使用 remix.run 构建自动完成功能，但后来我突然想到，在每次提交后过于依赖路由和表单来选择/聚焦输入，这无法产生良好的用户体验。用户将在表单中输入一些内容，表单被提交，他等待响应，然后输入再次聚焦，这里的用户体验是即时搜索/自动完成。

Answer 1

您需要的是useFetcher钩子 Remix 导出。这个钩子让你从任何路线的加载器中获取数据而不会导致导航，它是为这种 UI 添加的。

import { Form, useFetcher } from "remix"

export default function Screen() {
  let fetcher = useFetcher()

  function handleChange(event) {
    let value = event.currentTarget.value
    // load data from a route with a loader
    fetcher.load(`/api/autocomplete?query=${value}`)
  }

  return (
    <Form>
      <input type="text" onChange={handleChange} list="suggestions" />
      <datalist id="suggestions">
        {fetcher.data.map(item => {
          return <option key={item.id} value={item.value} />
        })}
      </datalist>
    </Form>
  )
}

类似的东西，在你用 fetcher 加载的端点中，你导出一个 loader

export async function loader({ request }) {
  let url = new URL(request.url)
  let query = url.searchParams.get("query") ?? "";
  let data = await getData(query)
  return json(data)
}