Остановить пульсацию родительского компонента из дочернего компонента

Question

Допустим, у меня есть простой код вроде:

<ListItem
  button={true}
>
  <Typography variant='caption' color='primary'>
            {value}
  </Typography>
  <Button
    onClick={foo}
  >
    Button
  </Button>
</ListItem>

Когда я щелкаю что-либо внутри ListItem, возникает эффект ряби, что нормально, но когда я нажимаю кнопку, я не хочуВолновой эффект родительского компонента, который будет запущен.Как мне это сделать?

Answer 1

Вы можете попробовать использовать disableRipple свойство ListItem. Установите его на true при нажатии на кнопку и установите на false при нажатии на элемент списка, что-то вроде:

const foo = () => this.setState(prevState => ({
  ...prevState,
  parentDisableRipple: true
}));
const enableRipple = () => this.state.parentDisableRipple && this.setState(prevState => ({
  ...prevState,
  parentDisableRipple: false
}));

return (
  <div>
    <Hello name={this.state.name} />
    <p>
      Start editing to see some magic happen :)
    </p>

    <ListItem button={true} 
              disableRipple={this.state.parentDisableRipple}
              onClick={enableRipple()}>
      <Typography variant='caption' color='primary'>
        {value}
      </Typography>
      <Button onClick={foo} >Button</Button>
    </ListItem>
  </div>
);

}

Я создал STACKBLITZ для игры с

Answer 2

Используйте event.stopPropagation () внутри обработчика нажатия кнопки.В вашем случае внутри функции foo ()