必须点击两次做一个方法在React

Have to click two times to do a method in React

本文关键字：一个 方法 React 两次      更新时间：2023-09-26

嘿，我目前正在Meteor和React的一个项目中工作，我目前正在使用Materialize对前端进行样式化。为了使下拉菜单和侧边导航工作，我需要在一些方法中添加一些jquery行。这里的问题是，我需要在按钮点击两次下拉栏和侧边栏激活或显示自己，但我已经点击了两次后，第一次只需点击一下。方法如下:

showDropdown(){
    $(".dropdown-button").dropdown();
}
collapse(){
    $('.button-collapse').sideNav({ menuWidth: 300, closeOnClick: true });
}
构造函数:

export default class Navigation extends TrackerReact(React.Component) {
constructor() {
    super();
    this.showDropdown= this.showDropdown.bind(this);
    this.collapse = this.collapse.bind(this);
}

这就是我使用这些方法在渲染:

render(){
    var navOptions;
    if (Roles.userIsInRole(Meteor.user(), 'user')){
        navOptions = (
            <div>
        <nav>
            <div className="nav-wrapper">
                <a href="/" className="brand-logo">SeniorSmart</a>
                <a href="" onClick={this.collapse} data-activates="mobile-demo"  className="button-collapse"><i className="material-icons">menu</i></a>
                <ul id="nav-mobile" className="right hide-on-med-and-down">
                    <li><a href="/">Hjem</a></li>
                    <li><a className='dropdown-button' href='' onClick={this.showDropdown} data-activates='dropdown1'>Drop Me!</a></li>
                    <li><a href="collapsible.html">JavaScript</a></li>
                </ul>
            </div>
        </nav>
                <ul id="dropdown1" className="dropdown-content">
                    <li><a href="/finn_aktiviteter">Finn aktiviteter</a></li>
                    <li><a href="#">Mine venners aktiviteter</a></li>
                    <li><a href="#">Mine påmeldinger</a></li>
                    <li><a href="/opprett_aktivitet">Opprett aktivitet</a></li>
                </ul>
                <ul className="side-nav" id="mobile-demo">
                    <li><a href="sass.html">Sass</a></li>
                    <li><a href="badges.html">Components</a></li>
                    <li><a href="collapsible.html">Javascript</a></li>
                    <li><a href="mobile.html">Mobile</a></li>
                </ul>
            </div>
    )

你必须点击两次，因为那些jQuery插件需要初始化。你的第一次点击初始化它们，然后它们就会正常工作，之后所有的其他点击。

为了避免这种情况，您应该在componentDidMount中初始化这些插件，但是您必须确保要使用的DOM元素放在屏幕上。

正如我在代码中看到的，只有在登录用户具有用户角色时才呈现导航。因此，如果user没有这个角色，nav元素将不会被呈现，这样插件就无法初始化。

相关文章：