reactjs 라우터의 Link 구성 요소를 사용하고 있는데 onClickevent가 작동하지 않습니다. 다음은 코드입니다.
<Link to={this.props.myroute} onClick='hello()'>Here</Link>
이것이 그것을하는 방법입니까 아니면 다른 방법입니까?
답변:
이것을 사용해야합니다 :
<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>
<Link to="" onClick={this.delete}>Delete</Link>. 여기서 "to"는 선택 사항입니다.
Link없이 사용 to하겠습니까? 당신이 그것을 필요로하지 않는 경우, 단지 다른 구성 요소 등으로 <button>와 onClick방법이있는 거 좋은 이동하십시오).
나는 이것이 일반적으로 사용하기에 좋은 패턴이라고 생각하지 않습니다. 링크는 onClick 이벤트를 실행 한 다음 경로로 이동하므로 새 경로로 이동하는 데 약간의 지연이 있습니다. 더 나은 전략은 당신이 한 것처럼 'to'prop을 사용하여 새로운 경로로 이동하는 것이며, 새로운 컴포넌트의 componentDidMount () 함수에서 hello 함수 나 다른 함수를 실행할 수 있습니다. 동일한 결과를 제공하지만 경로 간의 전환이 훨씬 더 원활합니다.
컨텍스트를 위해 여기에서와 같이 Link에서 onClick 이벤트로 redux 저장소를 업데이트하는 동안 이것을 발견했으며 새 경로의 구성 요소를 탑재하기 전에 ~ .3 초의 빈 흰색 화면 지연이 발생했습니다. 관련된 API 호출이 없었기 때문에 지연이 너무 커서 놀랐습니다. 그러나 콘솔 로깅 'hello'인 경우 지연이 눈에 띄지 않을 수 있습니다.
onClick새 경로로 전환하기 전에 쿠키에 저장중인 현재 구성 요소에 콜백 URL이 있습니다. 다음 구성 요소에서 해당 콜백 URL을 얻지 못하므로 전환하기 전에해야합니다. 그것에 대한 대안이 있습니까? 추신 : 콜백 URL은 새로 고침 후에도 액세스 할 수 있어야 저장소에 저장할 수 있습니다.
onPress={() => { this.props.navigation.navigate('NameOfNextScreen', { callbackUrl: 'http://.callbackUrl.com', });react-navigation을 사용하지 않는 경우 I Link의 onClick을 사용하고 약간의 성능 문제에 대해 걱정하지 마십시오. 아마 눈에 띄지 않을 것입니다.
this.hello.bind(this)