使用 bootstrap v5.0 在 React js 中显示所选项目

Question

我正在使用 Bootstrap v5.0，但无法显示从下拉菜单中选择的内容，就像我单击“操作”一样，它应该显示“操作”而不是“下拉菜单”Link 文本。知道如何使用这些代码在 React Js 中执行此操作。提前致谢。

下拉菜单 link

<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>

[Bootsrap v5.0 图片][1]

Answer 1

首先在React.js中创建一个状态。

const [selectedState, setSelectedState] = useState("")

您可以使用反引号。

className=`dropdown-item-${selectedState}`

并处理 onClick 事件。

onClick={setSelectedState("selected")}

这些代码使每个项目都被选中。 İf 你的链接有限，你可以给每个项目一个 id，你可以使用数组来保持你选择的项目 id 在你的状态。

使用 bootstrap v5.0 在 React js 中显示所选项目

Showing selected item in react js using bootstrap v5.0

html

javascript

reactjs

bootstrap-5