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

Program / 글쓴이

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

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 = () => {}