如何 link 到包含从下拉列表中选择的项目的页面

Question

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

看看：

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

<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-select 库，它是我必须过滤的组件，而不是转到我需要的那个页面..

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}
    />
  )
}

如何 link 到包含从下拉列表中选择的项目的页面

how to link to a page with picked item from dropdown

javascript

reactjs

react-select

react-native

react-hooks