Блог

Я хочу создать событие onBlur на левой панели, чтобы оно автоматически закрывалось, когда пользователь нажимает на панель справа. Я попытался использовать onMouseLeave событие, но анимация закрытия не является плавной. Я также хотел, чтобы они могли нажать кнопку на правой панели, она закрывает левую панель, одновременно выполняя функцию кнопки, которая запрещает использование прослушивателя на расстоянии щелчка.

все это работает с включенным размытием, но проблема в том, как остановить запуск события при нажатии на его дочерний компонент

код левой панели

       const options = [
        {
           title: 'System Config',
           icon: Settings,
           list: [
             { name: 'General Settings', to: path },
             { name: 'Product Defaults', to: `${url}/pDefaults` },
             { name: 'Inventory Impects', to: `${url}/invImpects` },
           ],
        },{
          title: 'dashboard',
          icon: Dashboard,
          list: [{ name: 'Reports', to: `${url}/reports` }],
        },
      ];

       <Drawer onBlur={() => setOpen(false)}>
         <Box>
           <IconButton onClick={handleDrawer}>
            {!open ? <ChevronRightIcon /> : <ChevronLeftIcon />}
          </IconButton>
          <Divider />
       </Box>
       <List>{options.map((opt, i) =>(
         <ListItem button key={opt}>
           <NavLink activeClassName={classes.activeTab} to={opt.to}>
             <ListItemIcon className={classes.listItemIcon}>
               <Icon />
             </ListItemIcon>
             <ListItemText className={classes.listItemText} primary={opt.title} />
           </NavLink>
         </ListItem>
        ))}
       </List>
       </Drawer>
 

код правой панели

      <Box className={classes.content}>
        <Switch>
          <Route exact path={path} component={GeneralSettings} />
          <Route path={`${path}/pDefaults`} component={ProductDefaults} />
        <Switch>
     </Box>
 

В MaterialUI есть ClickAwayListener компонент, похоже, это то, что вам нужно.

Один из вариантов решения этой проблемы-использовать крючок, который определяет, когда вы нажимаете за пределами элемента. Вот пример такого крючка. Ссылка должна быть назначена самому верхнему элементу React на вашей левой панели