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>

이와 같은 맥락에서

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

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

보시다시피 preventDefault ()를 명시 적으로 호출해야합니다. 이 문서가 도움이 될 것이라고 생각합니다 .

나를 위해 일한 멋지고 간단한 옵션은 다음과 같습니다.

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

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

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

내가 발견하고 나를 위해 일하는 요점 :

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

srph https://gist.github.com/srph/020b5c02dd489f30bfc59138b7c39b53에 대한 크레딧

체크 박스를 사용하는 경우

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

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

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

React Router를 사용하는 경우 편리한 구성 요소 LinkContainer가있는 react-router-bootstrap 라이브러리를 살펴 보는 것이 좋습니다. 이 구성 요소는 기본 페이지 다시로드를 방지하므로 이벤트를 처리 할 필요가 없습니다.

귀하의 경우에는 다음과 같이 보일 수 있습니다.

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

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

나는 앵커 태그에 약간의 문제가 있었고 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가 #이면 실제 새로 고침이 없기 때문에 오류가 제대로 표시됩니다.

이제 기본 HTML 태그가 아닌 사용자 지정 React 구성 요소의 두 번째 핸들러 인수로만 속성에 액세스 할 수 있음을 이해 합니다 . 물론 이벤트에서 HTML 태그 속성에 액세스하는 방법은 다음과 같습니다.

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

이것이 나와 같은 다른 사람들이 표시되지 않는 오류로 인해 당황하는 데 도움이되기를 바랍니다.

이 페이지를 방문했을 때 언급 된 옵션 중 정확하거나 저에게 적합한 옵션을 찾지 못했습니다. 그들은 나에게 테스트 할 수있는 아이디어를 주었고 이것이 나에게 효과적이라는 것을 알았습니다.

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

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

이 방법 중 어느 것도 나를 위해 일하지 않았으므로 CSS로 이것을 해결했습니다.

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