Question

我目前正在使用反应路由器来构建我的网站，但我在几个页面上.dropdown，我使用$('.dropdown').dropdown();初始化

如何在使用反应路由器访问的每个页面上保持初始化下拉列表？ onhashchange似乎没有注册更改网址。

这就是我的下拉列表功能。

的jQuery

    $(function() {
        $('.dropdown').dropdown();
        $(window).on('hashchange', function(e){
            $('.dropdown').dropdown();
        });
    });

    $.fn.extend({
        dropdown: function(o){
            var o = $.extend({ maxHeight: 600, buffer: 100, delay: 500 }, o);

            return this.each(function(){
                var dropdown = $(this),
                    toggle = dropdown.find('.toggle'),
                    menu = dropdown.find('.menu'),
                    a = dropdown.find('a'),
                    liheight = dropdown.height();
                if(!dropdown.length){ return; }


                toggle.click(function(e){
                    if(!menu.is(':visible')) {
                        $('.menu').parent().removeClass('open');
                    }
                    menu.parent().addClass('open');
                });

                $(document).bind('click', function(e){
                    if (! $(e.target).parents().hasClass('dropdown'))
                        menu.parent().removeClass('open');
                 });
            });
        }
    });

我也试过这个，但仍然没有运气：

$('body').on('focus', '.dropdown' function(e){
  $('.dropdown').dropdown();
});

编辑：解决方案

使用react路由器中的componentDidMount()函数在每次呈现下拉列表时初始化下拉列表。这就是我添加的内容：

export const elDropdown = React.createClass({
    componentDidMount: function() {
        $(document).ready(function() {
            $('.dropdown').dropdown();
        })
    },
    render() {
        return(
            <div>...

Answer 1

您需要在页面上显示下拉列表后对其进行初始化。正确的地方是React的生命周期方法。在这种情况下，componentDidMount - https://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount

您可以创建一个包装下拉列表并初始化它的组件。以下是如何实现这一目标的简单示例：

class DropdownWrapper extends React.Component {
  constructor(){
    super()
    this.id = 'someUniqueID'
  }
  componentDidMount(){
    $('#' + this.id).dropdown();
  }
  render(){
    return <select id={this.id} otherProps={this.otherProps} ></select>
  }
}

请注意，您需要使用唯一标识符。您可以手动将其传递给组件或随机创建。

用动态函数初始化一个元素 - jQuery

1 个答案: