Правильное использование window.confirm для onClick в JSX [дубликат]

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

 <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

}

У меня были некоторые проблемы с привязными тегами и 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>

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

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

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

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

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

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

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

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

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

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

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

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

Проверьте раздел «no autobinding». Вы должны написать обработчик: onClick = () => {}

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

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

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

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

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