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

Question

Я рендеринг связи с реагировать:

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) 

возвращение ложным - не работает.

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

Я также попытался все вышеперечисленное с помощью JQuery в моей index.html, но ничего не похоже на работу. Что мне делать и что я делаю неправильно? Я проверил event.type, и это click, поэтому я предполагаю, что мне удастся избежать перенаправления так или иначе?

Извините, я новичок, когда дело доходит до Реагирования.

Спасибо!

Answer 1

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

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

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

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

Answer 2

Это потому, что эти обработчики не сохраняют объем. Из документации по реагированию: react documentation

Проверьте раздел «отсутствие автоматической привязки».Вы должны написать обработчик, как: OnClick =() => {}

Answer 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 

} 

Answer 4

сутью я нашел и работает для меня:

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

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

Answer 5

оказывают: -> <a className="upvotes" onClick={(e) => {this.upvote(e); }}>upvote</a>

Answer 6

Полная версия решения будет обертывание метод upvotes внутри OnClick, проходя е и использовать родной e.preventDefault();

upvotes(e){ 
    //do something... 
    e.preventDefault(); 
} 

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

Answer 7

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

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

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

Потому что вы должны с помощью OnClick = {this.checkboxHandler}