如何在 React 的下拉选项中添加链接/标签答案

【问题标题】：How to add Link/ a tag in the options of dropdown in React如何在 React 的下拉选项中添加链接/标签
【发布时间】：2021-02-17 02:47:47
【问题描述】：

所以基本上，我正在做一个我对 REACT 不太熟悉的项目，我想做一个简单的下拉菜单来改变 URL（简单）。

这是代码-

function Front() {
const [selectedOption, setSelectedOption] = React.useState("A");



if (selectedOption === "A") {
  //Do something here (but what so that I can put that value of selectedOption in the Url?)
 
} else if (selectedOption === "B") {
  //Do something here

} else if (selectedOption === "C"){
    //Do somthing here
 
}

return (
  
<>

    <div className ="front__text">
       <h1>Wind Pioneers</h1> <button>Tutorial</button>
      
    </div>
    <div className="front__text__second">
        <p>Select System</p>
    <select className="drop"  value={selectedOption}
    onChange={evt => setSelectedOption(evt.target.value)}>
        <option value="A" id={1} >1
        
         </option>
         <option value="B" id={2}>
         2
         </option>
         <option value="C" id={3}>
         3
         </option>
    </select>
    </div>
        

    </div>

   
  
   
 </>
)
}

我尝试使用，但我认为链接和锚标记在那里不起作用，因为这可能被认为是糟糕的 HTML。我应该怎么做才能摆脱这种情况，而且我什至不想使用任何外部库来做到这一点。

【问题讨论】：

如果我理解正确，我认为您可以在按钮上添加一个 onClick 事件侦听器，并在该函数内部访问 selectedOption 状态值并使用它来更改 url。
检查这个：stackoverflow.com/questions/58114855/…
您只是想更改 URL 而不执行任何操作吗？还是将页面重定向到 URL？
实际上，我正在实现动态路由，如果 id (/:id) 与数据的 id 表匹配将得到渲染，我希望你得到 >

标签： javascript html reactjs

【解决方案1】：

您必须使用 npm 安装 popper.js 和 jquery.js。这将帮助您：

return (
<div>
  <div class="dropdown">
    <button
      class="btn btn-secondary dropdown-toggle"
      type="button"
      id="dropdownMenuButton"
      data-toggle="dropdown"
      aria-haspopup="true"
      aria-expanded="false"
    >
      Dropdown button
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    {/*enter the url you want inside href atribute*/}
      <a class="dropdown-item" href="#">
        A
      </a>
      <a class="dropdown-item" href="#">
        B
      </a>
      <a class="dropdown-item" href="#">
        C
      </a>
    </div>
  </div>
</div>
);

【讨论】：