Зреагуйте onClick та запобігайтеDefault () посилання оновлення / перенаправлення?

Я відображаю посилання з реакцією:

render: ->
  `<a className="upvotes" onClick={this.upvote}>upvote</a>`

Тоді, зверху, у мене є функція upvote:

upvote: ->
  // do stuff (ajax)

До посилання я мав пробіг у цьому місці, але мені потрібно перейти на посилання, і ось проблема - кожен раз, коли я натискаю на .upvotesсторінку, оновлюється те, що я намагався до цього часу:

event.preventDefault () - не працює.

upvote: (e) ->
  e.preventDefault()
  // do stuff (ajax)

event.stopPropagation () - не працює.

upvote: (e) ->
  e.stopPropagation()
  // do stuff (ajax)

повернути false - не працює.

upvote: (e) ->
  // do stuff (ajax)
  return false

Я також спробував усе вищезазначене, використовуючи jQuery у своєму index.html, але, здається, нічого не працює. Що мені тут робити і що я роблю не так? Я перевірив event.type, і clickтому я думаю, мені слід було б якось уникнути перенаправлення?

Вибачте, я новачок, коли справа доходить до React.

Дякую!

Події реакції насправді є синтетичними, а не природними подіями. Як тут написано :

Делегування подій: React насправді не приєднує обробники подій до самих вузлів. Коли React запускається, він починає прослуховувати всі події на верхньому рівні за допомогою одного прослуховувача подій. Коли компонент монтується або демонтується, обробники подій просто додаються або видаляються з внутрішнього відображення. Коли відбувається подія, React знає, як її відправити, використовуючи це відображення. Коли в відображенні не залишається обробників подій, обробники подій React - це прості операції.

Спробуйте використати Use Event.stopImmediatePropagation:

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

Повною версією рішення буде обгортання голосів методу всередині onClick, передача e та використання рідного 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>);
{

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

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

або якщо ви пишете у конструкторі es6 response у конструкторі, ви можете це зробити

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

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

}

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

У такому контексті

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

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

Як бачите, вам доведеться явно викликати prevenDefault (). Я думаю, що ці документи можуть бути корисними.

Приємним і простим варіантом, який працював у мене, було:

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

Це тому, що ці обробники не зберігають сферу дії. З документації реакції : документація реакції

Перевірте розділ "заборонено автоматичне прив’язування". Вам слід написати обробник, як: onClick = () => {}

Суть, яку я знайшов і працює для мене:

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

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

Якщо ви використовуєте прапорець

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

stopPropagation та stopImmediatePropagation не працюватимуть.

Тому що ви повинні використовувати onClick = {this.checkboxHandler}

Якщо ви використовуєте React Router, я пропоную заглянути в бібліотеку response-router-bootstrap, яка має зручний компонент LinkContainer. Цей компонент запобігає перезавантаженню сторінки за замовчуванням, тому вам не доведеться мати справу з подією.

У вашому випадку це може виглядати приблизно так:

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

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

У мене були проблеми з прив'язкою тегів і 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), яка не відображається на консолі, ймовірно через повне перезавантаження сторінки. Оскільки функція помилкова, функція 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>

Сподіваюся, це допоможе людям, таким як я, спантеличені не показаними помилками!

Коли я зайшов на цю сторінку, я не знайшов жодного із згаданих варіантів правильним і не працював для мене. Вони давали мені ідеї, щоб перевірити речі, і я виявив, що це спрацювало для мене.

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

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

жоден із цих методів не працював у мене, тому я просто вирішив це за допомогою CSS:

.upvotes:before {
   content:"";
   float: left;
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0;
   top: 0;
}