[reactjs] React Link 구성 요소에서 onClick 이벤트를 사용하는 방법은 무엇입니까?

Program / 글쓴이

reactjs 라우터의 Link 구성 요소를 사용하고 있는데 onClickevent가 작동하지 않습니다. 다음은 코드입니다.

<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’prop을 사용하여 새로운 경로로 이동하는 것이며, 새로운 컴포넌트의 componentDidMount () 함수에서 hello 함수 나 다른 함수를 실행할 수 있습니다. 동일한 결과를 제공하지만 경로 간의 전환이 훨씬 더 원활합니다.

컨텍스트를 위해 여기에서와 같이 Link에서 onClick 이벤트로 redux 저장소를 업데이트하는 동안 이것을 발견했으며 새 경로의 구성 요소를 탑재하기 전에 ~ .3 초의 빈 흰색 화면 지연이 발생했습니다. 관련된 API 호출이 없었기 때문에 지연이 너무 커서 놀랐습니다. 그러나 콘솔 로깅 ‘hello’인 경우 지연이 눈에 띄지 않을 수 있습니다.

답변