Блог

Я включаю свое приложение с помощью Redux. Я установил начальное значение True. При нажатии на значок появляется и исчезает поле раскрывающегося списка пользователей. Как закрыть его, когда я нажимаю на внешнюю часть.

Мое приложение состоит из основных компонентов и компонентов заголовка. Мой вопрос в том, что при нажатии на главную страницу(фон) переключатель должен быть закрыт. Чтобы решить эту проблему, я даже поставил исправление на Main.js страница. Кажется, это работает. но когда был нажат основной, появляется переключатель….

Вот код, который вы можете мне посоветовать для решения этой проблемы?

 header.js
const Header = ({ hidden, headerSize, bigHeader, UserInfoHidden }) => {
...ommit ...
<OptionContainer>
        <Hostbtn>Host</Hostbtn>
        <UserIcon />
        {UserInfoHidden ? null : <UserDropDown />}
      </OptionContainer>
    </HeaderContainer>
  );
};

const mapStateToProps = ({
  header: { UserInfoHidden },
}) => ({
  UserInfoHidden,
});
const mapDispatchToProps = dispatch => ({
  headerSize: locationY => dispatch(headerSize(locationY)),
});
export default connect(mapStateToProps, mapDispatchToProps)(Header);




---------------
UserDropDown.js 
const UserDropDown = () => {
  return (
    <UserDropDwonBox>
      <UserItem>
        <Linked to="/login">login/Linked>
        <Linked to="/login">signIn</Linked>
        <Line />
        <Text>Hosting</Text>
        <Text>Qamp;A</Text>
      </UserItem>
    </UserDropDwonBox>
  );
};

export default UserDropDown;
---------------

header-reducer.js
const INITAL_STATE = {
  bigHeader: true,
  UserInfoHidden: true,
};

const headerReducer = (state = INITAL_STATE, action) => {
  switch (action.type) {
    case HeaderType.BIG_SIZE_HEADER:
      return {
        ...state,
        bigHeader: sizeOfBar(state.bigHeader, action.payload),
      };
    case HeaderType.USER_INFO_DROP_DOWN:
      return {
        ...state,
        UserInfoHidden: !state.UserInfoHidden,
      };
    default:
      return state;
  }
};
export default headerReducer;