React onClick and preventDefault() 링크 새로 고침/redirect?

React onClick and preventDefault() 링크 새로 고침/redirect?

리액션으로 링크 렌더링:

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

그 다음, 위에 나는 상향표 기능을 가지고 있다.

upvote: ->
  // do stuff (ajax)

링크가 있기 전에 나는 그 장소에 있었지만 나는 링크로 전환해야 하고 내가 클릭할 때마다 여기에 문제가 생겼어..upvotes그 페이지가 새로워져서 지금까지 내가 해왔던 것.

event.preventDefault() - 작동하지 않음

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

event.stoppagement() - 작동하지 않음

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

거짓으로 돌려주다 - 효과가 없다.

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

나도 내 인덱스.html에 jQuery를 사용하여 위의 모든 것을 시도해 보았지만 아무 것도 효과가 없는 것 같아.내가 여기서 무엇을 해야 하고 내가 무엇을 잘못하고 있는가?event.type을 확인했는데,click그러니 어떻게든 방향을 바꿀 수 있어야겠죠?

리액션에 관해서는 나도 신참이야.

고마워!

반응 이벤트는 실제로 네이티브 이벤트가 아닌 합성 이벤트다.여기에 기술되어 있는 바와 같이:

이벤트 위임:React는 실제로 노드 자체에 이벤트 핸들러를 연결하지 않는다.리액션이 시작되면 단일 이벤트 수신기를 사용하여 최상위 레벨의 모든 이벤트에 대해 듣기 시작한다.구성 요소가 마운트되거나 마운트 해제되면 이벤트 핸들러는 내부 매핑에서 추가되거나 제거된다.이벤트가 발생하면 React는 이 매핑을 사용하여 이벤트를 디스패치하는 방법을 알고 있다.매핑에 이벤트 핸들러가 남아 있지 않은 경우, 리액션의 이벤트 핸들러는 단순한 no-ops가 된다.

사용 시도Event.stopImmediatePropagation:

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

솔루션의 전체 버전은 메소드를 onClick 내부로 감싸고 e를 전달하며 native 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>);
{

코드가 아래와 같이 보이도록 바인딩해 보십시오.

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

또는 만약 당신이 생성자의 es6 react 구성요소에 글을 쓴다면 당신은 이것을 할 수 있다.

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

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

}

이런 맥락에서

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

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

보시다시피 preventeDefault()를 명시적으로 호출해야 한다.내 생각에 이 문서들이 도움이 될 것 같아.

렌더: -><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에 대한 크레딧

나에게 효과가 있었던 멋지고 간단한 옵션은 다음과 같았다.

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

그 핸들러는 범위를 보존하지 않기 때문이다.대응 문서: 대응 문서

자동 바인딩 금지 섹션을 확인하십시오.다음과 같이 처리기를 작성하십시오. on클릭 = () => {}

나는 이 페이지에 왔을 때 언급된 어떤 옵션도 정확하거나 나에게 효과가 있는 것을 발견하지 못했다.그들은 나에게 시험해 볼 아이디어를 주었고 나는 이것이 나에게 효과가 있다는 것을 알게 되었다.

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

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

확인란을 사용하는 경우

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

Stoppaggement와 stopMediatePropagment는 작동하지 않을 것이다.

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

리액트 라우터를 사용하는 경우, 사용하기 편리한 구성 요소인 링크컨테이너가 있는 리액트라우터 부트스트랩 라이브러리를 찾아보십시오.이 구성 요소는 기본 페이지 재로드를 방지하므로 이벤트를 처리할 필요가 없다.

당신의 경우 다음과 같은 것처럼 보일 수 있다.

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

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

앵커 태그에 문제가 좀 있었고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가 #이면 실제 재로딩이 없기 때문에 오류가 제대로 표시된다.

나는 이제 기본 HTML 태그가 아닌 사용자 정의 React 구성 요소에서 두 번째 핸들러 인수로만 속성에 액세스할 수 있다는 것을 이해한다.물론 이벤트에서 HTML 태그 속성에 액세스하려면 다음과 같이 하십시오.

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

나는 이것이 나와 같은 다른 사람들이 실수를 보이지 않아 어리둥절하게 하는데 도움이 되었으면 좋겠어!

pure js do do preventdefault : 클래스에서 이렇게 처리기 메서드를 생성해야 한다.

handler(event) {
    event.preventDefault();
    console.log(event);
}

메소드를 호출할 때는 이벤트 개체를 전달해야 한다.

const handleOnSubmit = (e) => {
    console.log("in submit");
    e.preventDefault();
}; 

이렇게 불러야 한다.

<form onSubmit={(e) => handleOnSubmit(e)}> 

e를 이벤트 개체로 전달해야 하는 위치

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