Reactjs с Jquery: реализовать кнопку раскрывающегося списка без загрузки внешнего jQuery источника в Html - PullRequest
0 голосов
/ 29 мая 2020

Я реализовал раскрывающуюся кнопку с 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;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...