大佬教程收集整理的这篇文章主要介绍了如何从 React 中的实体化启用弹出菜单?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个 React 应用程序,我正在尝试像这样在那里添加一个导航栏
<ul ID="dropdown1" classname="dropdown-content">
<li><Navlink to="/create">Create lessons</Navlink></li>*/}
<li><Navlink to="/lessons">Lessons</Navlink></li>
<li><Navlink to="/quizes">Quizes</Navlink></li>
<li><Navlink to="/quizcreator">Create QuizGame</Navlink></li>
<li></li>
<li></li>
</ul>
<nav>
<div classname="nav-wrapper">
<a href="#!" classname="brand-logo">logo</a>
<ul classname="right hIDe-on-med-and-down">
<li><Navlink to="/home">Home</Navlink></li>
<li><a classname="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i
classname="material-icons right">arrow_drop_down</i></a></li>
<li><a href="/" onClick={logoutHandler}>logout</a></li>
</ul>
</div>
</nav>
我希望这个东西在点击或悬停时打开并显示内容
@H_678_2@materialize CSS website 描述如下代码$(".dropdown-trigger").dropdown();
但是我不知道在哪里插入它? MERN堆栈上的应用
根据 official doc,您应该能够启用所有下拉菜单,如下所示:
document.addEventListener('DOMContentLoaded',function() {
var elems = document.querySELEctorAll('.dropdown-trigger');
var instances = m.Dropdown.init(elems);
});
这是一个例子(请整页打开):
document.addEventListener('DOMContentLoaded',function() {
var elems = document.querySELEctorAll('.dropdown-trigger');
var instances = m.Dropdown.init(elems);
});
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudFlare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudFlare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</ul>
<nav>
<div class="nav-wrapper">
<a href="#!" class="brand-logo">Logo</a>
<ul class="right hide-on-med-and-down">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<!-- Dropdown trigger -->
<li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
,
在您的第二个“li”项目中添加一个 onclick 事件,传递事件对象,通过从事件对象中获取类名来调用 dropdown() 函数。
<li>
<a className="dropdown-trigger" href="#!" onclick{(E) => e.target.className.dropdown();} data-target="dropdown1">
Dropdown<i className="material-icons right">arrow_drop_down</i>
</a>
</li>
,
简单!只需将此代码添加到js文件中
document.addEventListener('DOMContentLoaded',function() {
var elems = document.querySELEctorAll('.dropdown-trigger');
var instances = m.Dropdown.init(elems);
});
您还没有初始化下拉菜单,这就是它不起作用的原因!并且不要使用这个框架,也许 MDbootstrap 会是完美的,因为他们给你一个 React 版本,而且他们有一个没有广告的漂亮文档!
,如您所说,您使用的是React,并且基于the link that you left on the question,$(".dropdown-trigger").dropdown();
是jQuery 方式,您需要找出React 方式
您可以安装 materialize-css 软件包,我想您会发现 How to use materialize-css with React? 对此很有帮助
然后像这样导入和使用包:
import React,{ useRef,useEffect } from 'react';
import M from 'materialize-css';
function DropDown() {
const dropDowntriggerRef = useRef();
useEffect(() => {
m.Dropdown.init(dropDowntriggerRef.current);
},[])
return (
// all of the other tags and other stuff
....
<li>
<a className="dropdown-trigger"
href="#!" data-target="dropdown1"
ref={dropDowntriggerRef}
>
Dropdown
<i className="material-icons right"> arrow_drop_down </i>
</a>
</li>
....
);
}
,
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudFlare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudFlare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</ul>
<nav>
<div class="nav-wrapper">
<a href="#!" class="brand-logo">Logo</a>
<ul class="right hide-on-med-and-down">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<!-- Dropdown trigger -->
<li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
以上是大佬教程为你收集整理的如何从 React 中的实体化启用弹出菜单?全部内容,希望文章能够帮你解决如何从 React 中的实体化启用弹出菜单?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。