如何在这些链接之一下输入下拉功能？

编程问答 2022-05-14

问题描述

如何在这些链接之一下输入下拉功能？ `import React,{ Component } from 'react'; 从 'react-router-dom' 导入 {Link}；

<Text>
  You have {" "}
  {remaining}$ {" "}
  from{" "}
  {total}$
<Text>

解决方法

您的意思是使用下拉选择器，例如 Material UI 的 Select 组件，并且每个选择都会导致您应用中的不同位置？

Select 组件通常有一个 onChange，同样是 Material 示例中的示例：

<Select
   labelId="demo-simple-select-label"
   id="demo-simple-select"
   value={age}
   onChange={handleChange}>
     <MenuItem value={10}>Ten</MenuItem>
     <MenuItem value={20}>Twenty</MenuItem>
     <MenuItem value={30}>Thirty</MenuItem>
</Select>

在 onChange 方法中，您需要做一些逻辑来确定去哪里，然后使用 React Router 的 history 对象去那里。

获取 history 对象：

const history = useHistory()

进入 onChange 事件处理程序：

const handleChange = (event) => {
    const uri == ... use event.target.value to determine the URI to go to
    history.push(uri)
};

查看以下链接：

javascriptnavnavnavbarnavbarreactjsreactjsreactjsreactjs