无法使用 React+Jquery 获取引导下拉菜单的选定文本

Question

这是一个下拉菜单的 Bootstrap 4 代码：

<div className="btn-group show">
<button className="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" data-type="fontFamily" style="width: 100px;">Avenir Next</button>
<div className="dropdown-menu">
<a className="dropdown-item" href="#" style="font-family: &quot;Avenir Next&quot;;">Avenir Next</a><a className="dropdown-item" href="#" style="font-family: Baghdad;">Baghdad</a>
<a className="dropdown-item" href="#" style="font-family: Helvetica;">Helvetica</a><a class="dropdown-item" href="#" style="font-family: Monotype;">Monotype</a>
<a className="dropdown-item" href="#" style="font-family: &quot;Times New Roman&quot;;">Times New Roman</a>
<a className="dropdown-item" href="#" style="font-family: &quot;Lucida Grande&quot;;">Lucida Grande</a>
<div className="dropdown-divider"></div>
<a className="dropdown-item" href="#" style="font-family: &quot;Lucida Grande&quot;;">Lucida Grande</a>
</div>

这是反应部分：

componentDidMount(){
$('.dropdown-item').click((e) => {
console.log('text', $(e.currentTarget).text());
});
}

单击下拉列表时，没有任何反应。我不知道为什么。

请帮忙

Answer 1

假设你使用的是JSX，class="..."应该className="..."。

也引出了一个问题，为什么你使用 jquery + React...