Решено - html кнопка вверху ссылки

Question

Эй, у меня есть div, который обернут компонентом Link, и внутри этого div у меня есть больше кнопок, но проблема в том, что когда я нажимаю на внутренние меньшие кнопки, я фактически нажимаю на компонент Link, поэтому Меня перенаправляют, а это не то, чего я хочу ... Как это исправить?

кажется, что нажата и ссылка, и кнопка, но если я собираюсь нажать только кнопку, я хочу избежать родительской ссылки.

Я имею в виду, что ссылка используется для перехода к некоторому URL при нажатии на него. Помещение элементов в это для других задач. Как и в блоге, вы нажимаете на родителя, он будет перенаправлять вас, но на дочернем элементе кнопка позволит вам удалить его

кодировал это в nodejs реагировать, поэтому я использовал события onClick

пример

<Link to="/blog-post">
  <div className="link-post-container">
      ...blog
      <button className='deleteButton'></button>
  </div>
</Link>

Я попробовал event.stopPropagation на кнопке, но она все равно ничего не делает. Это потому, что ссылка href вместо onClick?

РЕШЕНИЕ

, поэтому, используя некоторые из возможных решений ниже, я начал возиться и заметил в onClick элемента deleteButton, если я добавлю следующее, это работает:

event.preventDefault()

с этим, перенаправление из-за href больше не происходит, и будет происходить только событие нажатия кнопки

Answer 1

const handleClick = event => {
  event.stopPropagation()
  // then write rest of your onclick code 
}


<button className='deleteButton' onClick={handleClick}></button>

Answer 2

Событие щелчка распространяется от кнопки вверх в дереве DOM, пока не достигнет root (упрощенное объяснение - вы можете узнать больше о распространении события здесь ) . Вот почему ссылка также регистрирует ее и запускает свой обработчик onclick, перенаправляя вас на другой сайт.

Вы можете вызвать event.stopPropagation() в обработчике onClick своей кнопки, чтобы предотвратить достижение события инкапсулирующей ссылки.

источник