Я реализовал раскрывающуюся кнопку с Jquery в качестве внешней библиотеки в моем приложении. это хорошо работает. но я не хочу использовать jquery в качестве внешней библиотеки. Я хочу использовать jquery прямо в своем приложении. Я установил jquery с npm install в своем приложении и импортировал его с инструкциями по импорту. раскрывающийся список больше не работает. как я могу использовать jquery в моем приложении для реализации раскрывающегося списка без внешней библиотеки Спасибо за ваши ответы.
Здесь HTML и компонент раскрывающегося списка
Индекс. html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
Dropdown.jsx
import React, { Component } from 'react';
import 'jquery'
import 'bootstrap/dist/css/bootstrap.css'
class Dropdown extends Component {
constructor(props){
super(props)
}
changeDropdownText(e){
console.log(e.target.id);
document.getElementById("dropdownMenuButton").innerHTML = e.target.id;
this.props.updateDataAfterApplicationChoosed(e.target.id);
}
render() {
return(
<div className="dropdown" style={{paddingLeft: "10px"}}>
<button className="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Alle Systeme</button>
<div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
{
this.props.application.map((item) =>
<div className="dropdown-item" key={item} id={item} onClick={(e) => this.changeDropdownText(e)}>{item}</div>)
}
</div>
</div>
)
}
}
export default Dropdown;