React onClick и preventDefault() ссылка refresh/redirect?

Ответ 1

Реагирующие события на самом деле являются синтетическими событиями, а не родными событиями. Как написано здесь:

Делегирование событий: React фактически не присоединяет обработчики событий к самим узлам. Когда React запускается, он начинает прослушивать все события на верхнем уровне с помощью одного прослушивателя событий. Когда компонент монтируется или размонтируется, обработчики событий просто добавляются или удаляются из внутреннего сопоставления. Когда происходит событие, React знает, как его отправить, используя это сопоставление. Когда в отображении не осталось обработчиков событий, обработчики событий React являются простыми no-ops.

Попробуйте использовать Use Event.stopImmediatePropagation:

upvote: (e) ->
  e.stopPropagation();
  e.nativeEvent.stopImmediatePropagation();

Ответ 2

Полная версия решения будет заключать метод upvotes в onClick, передавать e и использовать native e.preventDefault();

upvotes = (e, arg1, arg2, arg3 ) => {
    e.preventDefault();
    //do something...
}

render(){
    return (<a type="simpleQuery" onClick={ e => this.upvotes(e, arg1, arg2, arg3) }>
      upvote
    </a>);
{

Ответ 3

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

 <a className="upvotes" onClick={this.upvote.bind(this)}>upvote</a>

или если вы пишете в es6, реагируете на компонент в конструкторе, вы можете сделать это

constructor(props){
   super(props);
   this.upvote = this.upvote.bind(this);
}

upvote(e){   // function upvote
   e.preventDefault();
   return false

}

Ответ 4

render: → <a className="upvotes" onClick={(e) => {this.upvote(e); }}>upvote</a>

Ответ 5

The Gist, который я нашел и работает для меня:

const DummyLink = ({onClick, children, props}) => (
    <a href="#" onClick={evt => {
        evt.preventDefault();
        onClick && onClick();
    }} {...props}>
        {children}
    </a>
);

Кредит для srph https://gist.github.com/srph/020b5c02dd489f30bfc59138b7c39b53

Ответ 6

Это связано с тем, что эти обработчики не сохраняют область видимости. Из документации реакции: отредактировать документацию

Отметьте раздел "no autobinding". Вы должны написать обработчик, например: onClick =() = > {}

Ответ 7

Если вы используете флажок

<input 
    type='checkbox'
    onChange={this.checkboxHandler}
/>

stopPropagation и stopImmediatePropagation не будет работать.

Потому что вы должны использовать onClick= {this.checkboxHandler}

Ответ 8

Если вы используете React Router, я бы посоветовал заглянуть в библиотекуact-router-bootstrap, в которой есть удобный компонент LinkContainer. Этот компонент предотвращает перезагрузку страницы по умолчанию, поэтому вам не нужно иметь дело с событием.

В вашем случае это может выглядеть примерно так:

import { LinkContainer } from 'react-router-bootstrap';

<LinkContainer to={givePathHere}>
    <span className="upvotes" onClick={this.upvote}>upvote</span>
</LinkContainer>

Ответ 9

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

Проблема, с которой я часто сталкиваюсь, заключается в том, что я пытаюсь получить доступ к атрибутам компонента, деструктурируя их напрямую, как и с другими компонентами React. Это не будет работать, страница будет перезагружена, даже с e.preventDefault():

function (e, { href }) {
  e.preventDefault();
  // Do something with href
}
...
<a href="/foobar" onClick={clickHndl}>Go to Foobar</a>

Похоже, что деструктуризация вызывает ошибку (Cannot read property 'href' of undefined удается Cannot read property 'href' of undefined), которая не отображается на консоли, возможно, из-за полной перезагрузки страницы. Поскольку функция находится в состоянии ошибки, preventDefault не вызывается. Если href равен #, ошибка отображается правильно, поскольку нет фактической перезагрузки.

Теперь я понимаю, что я могу получить доступ к атрибутам только в качестве второго аргумента обработчика в пользовательских компонентах React, а не в собственных тегах HTML. Поэтому, конечно, чтобы получить доступ к атрибуту HTML-тега в событии, это было бы так:

function (e) {
  e.preventDefault();
  const { href } = e.target;
  // Do something with href
}
...
<a href="/foobar" onClick={clickHndl}>Go to Foobar</a>

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

Ответ 10

Когда я зашел на эту страницу, я не нашел ни одного из упомянутых вариантов правильным или подходящим для меня. Они дали мне идеи, чтобы проверить вещи, и я обнаружил, что это работает для меня.

dontGoToLink(e) {
  e.preventDefault();
 }

render() {
  return (<a href="test.com" onClick={this.dontGoToLink} />});
}

Ответ 11

В таком контексте, как это

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

Как вы можете видеть, вы должны вызывать protectDefault() явно. Я думаю, что эта документация может быть полезной.

Ответ 12

Хороший и простой вариант, который работал для меня, был:

<a href="javascript: false" onClick={this.handlerName}>Click Me</a>