bugfix> javascript > 投稿

ルートが変更されたときにメニューの状態を変更したいのですが、機能しません。

私が直面している問題:ナビゲーションバーからリンクをクリックしたとき。ルートは変更されますが、閉じません。ルートが変更されたときにメニューの状態を変更するにはどうすればよいですか? react-router-reduxはこれを助けてくれますか?

アクション

export function menuToggle(currentState) {
  return {
    type: 'MENU_TOGGLE',
    payload: {
      ToggleMenu: !currentState,
    },
  };
}

レデューサー

const initialState = {
  showMenu: false,
};
export const MenuToggle = (state = initialState, action) => {
  switch (action.type) {
    case MENU_TOGGLE:
      return {
        showMenu: action.payload.ToggleMenu,
      };
    default:
      return state;
  }
};

成分

class Header extends Component {
  componentWillMount() {
    document.addEventListener('click', this.handleClickOutside, false);
  }
  componentWillUnmount() {
    document.removeEventListener('click', this.handleClickOutside, false);
  }
  handleClickOutside = e => {
    if (!ReactDOM.findDOMNode(this).contains(e.target)) {
      this.props.showMenu === true && this.props.menuToggle(!false);
    }
  };
  render() {
    return (
      <Head>
        <Brand>BRAND</Brand>
        <MenuButton
          onClick={this.props.menuToggle.bind(null, this.props.showMenu)}
        >
          MENU
        </MenuButton>
        <MobileMenu showMenu={this.props.showMenu} />
      </Head>
    );
  }
}
const mapStateToProps = state => {
  return {
    showMenu: state.MenuToggle.showMenu,
  };
};
const mapDispatchToProps = { menuToggle };
export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(Header);

子コンポーネント

const MobileMenu = ({ showMenu }) => {
  return (
    showMenu === true && (
      <Nav>
        <Ul>
          <Li>
            <A to="/">
              <Span>Home</Span>
            </A>
          </Li>
          <Li>
            <A to="/shop">
              <Span>Shop</Span>
            </A>
          </Li>
          <Li>
            <A to="/contact">
              <Span>Contact</Span>
            </A>
          </Li>
        </Ul>
      </Nav>
    )
  );
};
export default MobileMenu;