React onClick и preventDefault () обновление/перенаправление ссылок?

Я рендеринг ссылки с react:

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

затем, выше у меня есть функция upvote:

upvote: ->
  // do stuff (ajax)

перед ссылкой У меня был span в этом месте, но мне нужно переключиться на ссылку, и вот проблема-каждый раз, когда я нажимаю на .upvotes страница обновляется, что я пробовал до сих пор:

событие.метод preventDefault() - не работает.

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

событие.это происходит() - не рабочий.

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

return false - не работает.

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

Я также пробовал все вышеперечисленное, используя jQuery в моем индексе.html, но ничего не работает. Что мне здесь делать и что я делаю не так? Я проверил событие.тип и click Итак, я думаю, что я должен быть в состоянии избежать перенаправления как-то?

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

спасибо!

41
coffeescript hyperlink preventdefault reactjs

11 ответов

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

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

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

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

полная версия решения будет обертывать метод upvotes внутри 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>);
{
32

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

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

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

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

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

}
14

отображения: -> <a className="upvotes" onClick={(e) => {this.upvote(e); }}>upvote</a>

6

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

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

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

1

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

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

0

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

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

это происходит и stopImmediatePropagation не будет работать.

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

0

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

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

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

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

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

проблема, с которой я часто сталкиваюсь, заключается в том, что я пытаюсь получить доступ к атрибутам компонента уничтожая их непосредственно как с другими реагируют компонентов. это не сработает, страница перезагрузится, даже 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>

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

0

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

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

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

в таком контексте

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

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

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

0