react Link 컴포넌트에서 onClick 이벤트를 사용하는 방법

react Link 컴포넌트에서 onClick 이벤트를 사용하는 방법

reactjs 라우터에서 Link 컴포넌트를 사용하고 있는데 OnClikevent가 동작하지 않습니다.코드는 다음과 같습니다.

<Link to={this.props.myroute} onClick='hello()'>Here</Link>

이렇게 하는 거야, 아니면 다른 거야?

합격입니다hello()스트링으로서도hello()실행 수단hello지금 당장.

해라

onClick={hello}

다음을 사용해야 합니다.

<Link to={this.props.myroute} onClick={hello}>Here</Link>

또는 (방법인 경우)hello이 클래스에 배치됩니다.

<Link to={this.props.myroute} onClick={this.hello}>Here</Link>

업데이트: ES6 및 최신 버전의 경우 클릭 방식으로 일부 매개 변수를 바인딩하려면 다음을 사용할 수 있습니다.

    const someValue = 'some';  
....  
    <Link to={this.props.myroute} onClick={() => hello(someValue)}>Here</Link>

나는 이것이 일반적으로 사용하기에 좋은 패턴이라고 생각하지 않는다.링크는 onClick 이벤트를 실행한 다음 경로로 이동하므로 새 경로로 이동하는 데 약간의 지연이 발생합니다.보다 나은 전략은 기존과 같이 'to' 프로포트를 사용하여 새로운 루트로 이동하는 것입니다.또한 새로운 컴포넌트의 componentDidMount() 함수에서는 hello 함수 또는 기타 함수를 실행할 수 있습니다.같은 결과를 얻을 수 있지만 노선 간 전환이 훨씬 원활해집니다.

참고로, 여기와 같이 Link에서 onClick 이벤트로 redux 스토어를 업데이트하던 중 이 사실을 알게 되었습니다.새 루트의 컴포넌트를 마운트하기 전에 빈 화면과 흰색 화면이 약 3초 지연되었습니다.API 호출이 없었기 때문에 지연이 너무 커서 놀랐습니다.단, 콘솔로그만 'hello'일 경우 지연은 눈에 띄지 않을 수 있습니다.

 const onLinkClick = (e) => {
    e.preventDefault();
    ---do your stuff---
    history.push('/your-route');
};

<a href='/your-route' onClick={onLinkClick}> Navigate </a>
                   or
<Link to='/your-route' onClick={onLinkClick}> Navigate </Link>

1. react on Click 이벤트에서 사용할 링크

   <a href="#" onClick={this.setActiveTab}>
     ...View Full List
   </a>
   
   setActiveTab = (e) => {
     e.preventDefault();
     console.log(e.target);
   }
   

이 경우 hello 함수에 주의하십시오.이 경우 event.proventDefault()를 쓰지 않아도 됩니다.그렇지 않으면 Link to가 작동하지 않습니다.

ReactJs에서 핸들러를 사용하려면 {}을(를) 사용해야 합니다. onClick='hello()' 대신 onClick={ ()=> hello() }를 사용합니다.

도우미 문서 => https://reactjs.org/docs/handling-events.html

언급URL : https://stackoverflow.com/questions/42800815/how-to-use-onclick-event-on-react-link-component