javascript - 下拉响应和 Redux

Question

如何打开一个，然后再打开一个。而且当您单击另一个区域时，它们会关闭。

React 下拉代码:

<div className="header__nav">
          <div className={classnames('header__nav__title', { 'is-active' : this.props.navAuthors })} onClick={this.props.toggleNavAuthors}><FormattedMessage {...messages.authors} /></div>
          <ReactCSSTransitionGroup transitionName='header-menu-animation' transitionEnterTimeout={350} transitionLeave={false}>
            {this.props.navAuthors ? this._renderAuthors() : null}
          </ReactCSSTransitionGroup>
        </div>
        <div className="header__nav">
          <div className={classnames('header__nav__title', { 'is-active' : this.props.nav })} onClick={this.props.toggleNav}><FormattedMessage {...messages.typefaces} /></div>
          <ReactCSSTransitionGroup transitionName='header-menu-animation' transitionEnterTimeout={350} transitionLeave={false}>
            {this.props.nav ? this._renderTypefaces() : null}
          </ReactCSSTransitionGroup>
        </div>

关于 redux 下拉代码:

import {
  SHOW_NAV,
  HIDE_NAV
} from '../constants/ActionTypes'

export function toggleNav() {
  return (dispatch, getState) => {
    const { nav } = getState()
    dispatch({
      type: nav ? HIDE_NAV : SHOW_NAV
    })
  }
}

export function hideNav() {
  return {
    type: HIDE_NAV
  }
}

Answer 1

像这样的组件本地的注释状态可以保存在组件中。另一方面，要求在下拉菜单外单击应关闭下拉菜单(或更确切地说所有下拉菜单)将再次暗示全局状态(因为它本质上是页面的属性，不再是下拉菜单)。因此，正确的 redux 方法是引用您商店中当前打开的下拉菜单，并在您的文档或窗口上设置一个点击处理程序来重置该下拉菜单。这样，任何其他下拉菜单也只会将自己设置为商店中打开的下拉菜单，并自动关闭任何其他下拉菜单。

但我仍然不希望使用这种 UI 状态数据使我的商店过于复杂，所以我最近创建了一个 Dropdown 类，它使用本地状态和文档事件的组合来处理“随时只打开一个下拉菜单”处理程序。这是此组件的一个非常简化的版本(也可在此处作为 fiddle 获得)。

// Choose a unique name for your event, this will be listened to by 
// all the dropdown components.
var EVENTNAME = "dropdown-close";

// The document triggers the event whenever anything is clicked
document.addEventListener('click', (e)=>
{
    window.dispatchEvent(new CustomEvent(EVENTNAME, { 
        // need to pass in the original element as reference
        // so the handler can check if it triggered it itself
        detail: e.srcElement
    }));
});

var DropDown = React.createClass({

    getInitialState: function() 
    {
        return {open: false};
    },

    render()
    {
        let menu = null;
        if (this.state.open) { 
            menu = this.props.children;
        }
        return <div className="dropdown">
            <a className="dropdown-toggle" ref="toggle" onClick={this.toggleMenu}>Dropdown</a>
            {menu}
        </div>
    },

    toggleMenu(e)
    {
        this.setState({open: !this.state.open});
    },

    closeMenu(e)
    {
        if (e.detail !== this.refs.toggle)
        {
            this.setState({open: false});
        }
    },

    componentWillMount()
    {
        var that = this;
        window.addEventListener(EVENTNAME, this.closeMenu);
    },

    componentWillUnmount()
    {
        var that = this;
        window.removeEventListener(EVENTNAME, this.closeMenu);
    }
});

ReactDOM.render(
  <div>
    <h1>First</h1>
    <DropDown>
      <li>Item 1 (in my case these are also React comps)</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </DropDown>
    <hr/>
    <h1>Second</h1>
    <DropDown>
      <li>Item 1 (in my case these are also React comps)</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </DropDown>
  </div>,
  document.getElementById('container')
);

本质上，下拉菜单根据本地状态呈现它的子项。下拉切换是它自己的状态。页面上的任何点击都会触发一个事件，每个组件都会检查它是否触发了事件本身，如果没有，它将自行关闭。