Event.stopPropogation не работает для контейнера пользовательского интерфейса материала - PullRequest
Новая
       9

Event.stopPropogation не работает для контейнера пользовательского интерфейса материала

1 голос
/ 13 мая 2019

У меня есть страница, на которой есть это. 

<div>
  <Link key={row.id} onUpdateTask={this.props.onUpdateTask} to= {`/Supervisor/Task/${row.id}`}>
     <Paper className={classes.root} key={row.id}>
        <Grid container xs={12} className={classes.topContainer}>
           <Grid item xs={3}>
              <IconButton
                 className={classes.priorityIconButton}
                 aria-owns={anchorEl ? 'simple-menu' : undefined}
                 onClick={(e) => {this.handleClick(e, index)}}>   
               </IconButton>
            </Grid>
            <Grid item xs={9}>
              <Typography className={classes.activity} variant="body1">{row.name}</Typography>
            </Grid>
          </Grid>
        </Paper>
     </Link>
</div>

ВКЛ. При щелчке по значку. Необходимо открыть меню. 

handleClick = (event, index) => {
    event.stopPropagation();
    console.log("I came nereee")
    this.setState({ anchorEl: event.currentTarget, rowIndex: index });
  }

Но handleClick не получаетсясрабатывает, несмотря на наличие события stopPropogation внутри.Страница просто перенаправляет на страницу редактирования (родительский контейнер при клике ведет на страницу редактирования).Как я могу убедиться, что родительский контейнер по-прежнему доступен для щелчка, но при нажатии на элемент меню он все равно выполняет то, что ему нужно, и не выполняет действия своих родителей?

1 Ответ

1 голос
/ 14 мая 2019

Вместо event.stopPropagation(); вам нужно использовать event.preventDefault();.

Я предполагаю, что элемент Link разрешается в тег a со свойством href (т.е.стандартная ссылка html).Если это так, event.stopPropagation() не будет иметь никакого эффекта.stopPropagation() будет препятствовать тому, чтобы событие переполняло DOM другим слушателям событий, но любое поведение браузера по умолчанию для события (такое как открытие ссылки) будет выполнено в конце распространения события, если вы не выполните event.preventDefault().

Вот несколько ресурсов, которые я нашел, описывающих это:

...