最新消息:VPS服务器又从fzhost.net换回Linode了,主题仍用朋友推荐的大前端D8

【已解决】ReactJS中点击按钮无法显示下拉弹框

ReactJS crifan 301浏览 0评论

之前折腾过的ReactJS-AdminLTE中,点击右上角后是可以弹出框,显示用户信息的:

现在基于react-hot-boilerplate转换为纯的reactjs的项目后,点击按钮,没法弹出用户信息的弹框了:

对应的前面的html是:

<li class="dropdown user user-menu open"><a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"><img src="dist/img/user2-160×160.jpg" class="user-image" alt="User Image"><span class="hidden-xs">李茂</span></a><ul class="dropdown-menu"><li class="user-header"><img src="dist/img/user2-160×160.jpg" class="img-circle" alt="User Image"><p><!– react-text: 23 –>李茂 – 码农<!– /react-text –><small>2017/08/11</small></p></li><li class="user-footer"><div class="pull-right"><a href="#" class="btn btn-default btn-flat">退出登录</a></div></li></ul></li>

感觉是:dropdown-toggle起效果的。

和此处不工作的:

<li class="dropdown user user-menu"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="/adminlte/assets/img/user2-160x160_1PWD_r.jpg" class="user-image" alt="User Image"><span class="hidden-xs">李茂</span></a><ul class="dropdown-menu"><li class="user-header"><img src="/adminlte/assets/img/user2-160x160_1PWD_r.jpg" class="img-circle" alt="User Image"><p><!– react-text: 23 –>李茂 – 码农<!– /react-text –><small>2017/08/11</small></p></li><li class="user-footer"><div class="pull-right"><a href="#" class="btn btn-default btn-flat">退出登录</a></div></li></ul></li>

对比后,是多了:

open

aria-expanded="true"

看来是js触发的?

难道是此处reactjs,是导致之前的js没有生效?

无意间搜到:

ReactJS-AdminLTE/public/bootstrap/js/bootstrap.js

中有提到:

是Collapse中去操作:添加aria-expanded为true的。

reactjs bootstrap collapse

react-component/collapse: React Collapse / Accordion

Independent Collapsing Panel? · Issue #190 · react-bootstrap/react-bootstrap

是用react的方式去通过state控制的。

reactjs – Bootstrap collapse with react js – Stack Overflow

也说到了,bootstrap是直接操作dom的,和react没法直接兼容,可以利用别人写的:

react-bootstrap/react-bootstrap: Bootstrap 3 components built with React

抽空可以去试试

但是也有人说了:

或许应该先去声明jquery等变量,或许内部就可以生效了?

加上之前的ReactJS-AdminLTE中,就是这么做的:

所以此处也去加上:

  new webpack.ProvidePlugin({
    ‘$’: ‘jquery’,
    ‘window.jQuery’: ‘jquery’,
    ‘jQuery’: ‘jquery’,
    ‘window.$’: ‘jquery’,
  }),

试试:

结果导致另外的错误:

【已解决】Reactjs中集成AdminLTE出错:Uncaught TypeError: $(…).DataTable is not a function

所以还是注释掉webpack.ProvidePlugin才可以。

所以,正确的思路,应该还是:通过react的state去控制是否显示弹框。

但是需要搞清楚的是:为何之前的项目中:

<a href="#" className="dropdown-toggle" data-toggle="dropdown”>

部分的代码,也是在react的逻辑下,为何可以生效?

难道是因为:

webpack-dev-server之外ReactJS-AdminLTE中的其他css等内容,还是通过server.js中的express的服务器加载的,然后其中的bootstrap也是可以直接操作dom的,所以可以生效?

不论如何,此处直接通过bootstrap直接操作dom,在react中是不允许的,不合适的。所以,不应该通过这种方式去操作。

twitter bootstrap – How to collapse a div with reactjs? – Stack Overflow

reactjs – React-Bootstrap Collapse button not working – Stack Overflow

reactjs – How to handle collapsible menus from Bootstrap on React – Stack Overflow

在改为通过state去控制之前,先去看看那个:

react-bootstrap/react-bootstrap: Bootstrap 3 components built with React

React-Bootstrap

感觉是:

应该去用:

React-Bootstrap Components

中的Collapse或Dropdown的组件,才对。

关于原生的bootstrap的:

JS的接口:

JavaScript · Bootstrap

组件Components

如果后续有需要就去看看。

其实此处的代码:

<li className="dropdown user user-menu">
                                <a href="#" className="dropdown-toggle" data-toggle="dropdown">
                                    <img src={imgUser2} className="user-image" alt="User Image" />
                                    <span className="hidden-xs">李茂</span>
                                </a>
                                <ul className="dropdown-menu">
                                    {/* User image */}
                                    <li className="user-header">
                                        <img src={imgUser2} className="img-circle" alt="User Image" />
                                        <p>
                                            李茂 – 码农
                                            <small>2017/08/11</small>
                                        </p>
                                    </li>
                                    {/* Menu Body */}
                                    {/* <li className="user-body">
                                        <div className="col-xs-4 text-center">
                                            <a href="#">Followers</a>
                                        </div>
                                        <div className="col-xs-4 text-center">
                                            <a href="#">Sales</a>
                                        </div>
                                        <div className="col-xs-4 text-center">
                                            <a href="#">Friends</a>
                                        </div>
                                    </li> */}
                                    {/* Menu Footer */}
                                    <li className="user-footer">
                                        {/* <div className="pull-left">
                                            <a href="#" className="btn btn-default btn-flat">Profile</a>
                                        </div> */}
                                        <div className="pull-right">
                                            <a href="#" className="btn btn-default btn-flat">退出登录</a>
                                        </div>
                                    </li>
                                </ul>
                            </li>

应该改为:

Transitions – Collapse

的写法才对。

不过此处还是先去试试:

直接通过state控制css的style,决定是否下拉显示,看看效果。

之后再去改为react的component去用到react-bootstrap的Collapse的写法。

【总结】

代码改为:

export default class HeaderBar extends Component {
    constructor() {
        super();
        
        // Initial state
        this.state = {
            isUserDropdown: false
        };
        this.toogleUserDropdown = this.toogleUserDropdown.bind(this);
    }
    render() {
        console.log(`HeaderBar render`);
        return (
            <header className="main-header”>
。。。
                    <div className="navbar-custom-menu">
                        <ul className="nav navbar-nav">
                            <li className={this.state.isUserDropdown ? ‘dropdown user user-menu open’ : ‘dropdown user user-menu’}>
                                <a
                                    href="#"
                                    onClick={this.toogleUserDropdown}
                                    className="dropdown-toggle"
                                    data-toggle="dropdown"
                                    aria-expanded={this.state.isUserDropdown ? ‘true’ : ‘false’}
                                >
                                    <img src={imgUser2} className="user-image" alt="User Image" />
                                    <span className="hidden-xs">李茂</span>
                                。。。

就可以了:

点击后,会弹出下拉信息菜单,效果:

【已解决】ReactJS中如何把AdminLTE中左边导航栏缩起来

转载请注明:在路上 » 【已解决】ReactJS中点击按钮无法显示下拉弹框

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
15 queries in 0.246 seconds, using 10.36MB memory