onClick에 반응하고 preventDefault () 링크 새로 고침 / 리디렉션?

onClick에 반응하고 preventDefault () 링크 새로 고침 / 리디렉션?

---

반응으로 링크를 렌더링하고 있습니다.

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

또한 index.html에서 jQuery를 사용하여 위의 모든 것을 시도했지만 아무것도 작동하지 않는 것 같습니다. 여기서 내가 뭘해야하고 내가 뭘 잘못하고 있니? event.type을 확인했는데 click어떻게 든 리디렉션을 피할 수 있어야할까요?

실례합니다. 저는 React에 관해서는 신인입니다.

감사합니다!

---

React 이벤트는 실제로 네이티브 이벤트가 아니라 합성 이벤트입니다. 여기 에 쓰여진대로 :

이벤트 위임 : React는 실제로 이벤트 핸들러를 노드 자체에 연결하지 않습니다. React가 시작되면 단일 이벤트 리스너를 사용하여 최상위 레벨에서 모든 이벤트 수신을 시작합니다. 구성 요소가 마운트되거나 마운트 해제되면 이벤트 핸들러가 내부 매핑에서 추가되거나 제거됩니다. 이벤트가 발생하면 React는이 매핑을 사용하여 이벤트를 전달하는 방법을 알고 있습니다. 매핑에 이벤트 핸들러가 남아 있지 않으면 React의 이벤트 핸들러는 단순한 no-ops입니다.

사용 시도 Event.stopImmediatePropagation:

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

---

풀 버전의 솔루션은 onClick 내부에서 upvotes 메서드를 래핑하고 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>);
{

---

bind (this) 코드가 아래와 같이 보이도록합니다.

 <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

}

---

렌더링 :-> <a className="upvotes" onClick={(e) => {this.upvote(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에 대한 크레딧

---

이는 해당 핸들러가 범위를 보존하지 않기 때문입니다. 반응 문서에서 : 반응 문서

"자동 바인딩 없음"섹션을 확인하십시오. 다음과 같이 핸들러를 작성해야합니다. onClick = () => {}

---

체크 박스를 사용하는 경우

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

stopPropagation 및 stopImmediatePropagation 이 작동하지 않습니다.

onClick = {this.checkboxHandler} 를 사용해야하기 때문에

---

If you are using React Router, I'd suggest looking into the react-router-bootstrap library which has a handy component LinkContainer. This component prevents default page reload so you don't have to deal with the event.

In your case it could look something like:

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

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

---

I've had some troubles with anchor tags and preventDefault in the past and I always forget what I'm doing wrong, so here's what I figured out.

The problem I often have is that I try to access the component's attributes by destructuring them directly as with other React components. This will not work, the page will reload, even with e.preventDefault():

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

It seems the destructuring causes an error (Cannot read property 'href' of undefined) that is not displayed to the console, probably due to the page complete reload. Since the function is in error, the preventDefault doesn't get called. If the href is #, the error is displayed properly since there's no actual reload.

I understand now that I can only access attributes as a second handler argument on custom React components, not on native HTML tags. So of course, to access an HTML tag attribute in an event, this would be the way:

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

I hope this helps other people like me puzzled by not shown errors!

---

I didn't find any of the mentioned options to be correct or work for me when I came to this page. They did give me ideas to test things out and I found that this worked for me.

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

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

---

In a context like this

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

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

As you can see, you have to call preventDefault() explicitly. I think that this docs, could be helpful.

---

A nice and simple option that worked for me was:

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

---

none of these methods worked for me, so I just solved this with CSS:

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

참고URL : https://stackoverflow.com/questions/36316846/react-onclick-and-preventdefault-link-refresh-redirect