javascript - 如何链接到包含从下拉列表中选择的项目的页面

Question

我正在为我的网络应用程序使用react-select 我有一个带有自动填充功能的下拉菜单，当我单击输入时，我将看到来自 API 的所有汽车项目的列表，但我需要输入所需的项目并重定向到该详细信息页面。 我应该为此创建路线吗？

看一下:

当我点击 BMW 时，我需要转到 BMW 详细信息页面。 如果它只是简单的汽车项目，我会在链接下创建一个按钮

<Link  className='btn-item auction-btn mr-2' to={`/carDetails/${item.id}`}>Details</Link>.

带路由:

 <Route
            exact
            path="/carDetails/:id"
            render={({ match }) => (
              <CarDetails item={data.find((item) => String(item.id) === String(match.params.id))} />
            )}
          />

但这是 react 选择库，它是我必须过滤的组件，而不是转到我需要的页面..

Answer 1

您可以在react-select的更改处理程序中执行history.push。一个例子:

export default function MyComponent() {
  const [value, setValue] = useState()
  const history = useHistory()

  function handleChange(newValue) {
    setValue(newValue)
    history.push(`/carDetails/${newValue.id}`)
  }

  return (
    <Select
      value={value}
      options={options}
      onChange={handleChange}
    />
  )
}