javascript - 如何在 React 的下拉选项中添加 Link/a 标签

Question

所以基本上，我正在做一个我对 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>

   
  
   
 </>
)
}

我尝试使用，但我认为链接和 anchor 标记在那里不起作用，因为这可能被视为糟糕的 HTML。我需要做什么才能摆脱这种情况，而且我什至不想使用任何外部库来执行此操作。

Answer 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>
);