如何在React Link组件上使用onClick事件？

82

我正在使用reactjs路由器中的Link组件，但无法使onClickevent运行。这是代码：

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

这是做这件事的方式还是另一种方式？

reactjs react-router react-redux

— 比尔·耶尔
source

124

您hello()以字符串形式传递，也hello()意味着hello立即执行。

尝试

onClick={hello}

— CodinCat
source

31

您应该使用此：

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

或（如果方法hello位于此类上）：

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

更新：对于ES6和最新版本，如果要使用click方法绑定某些参数，可以使用以下方法：

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

— 维塔利（Vitaliy Andrusishyn）
source

4

或更好this.hello.bind(this)

— webNeat

4

^实际上，应该始终将构造函数中的动作绑定为绑定方式，因为绑定方式会导致性能问题。

— 双节棍18'Apr 26'0

链接“到”是必需的，但是通常我只需要onClick（），目前，我必须做类似的事情<Link to="" onClick={this.delete}>Delete</Link>。我希望“ to”在这里是可选的。

— 纽曼

2

@newman为什么你会用Link不to？如果不需要它，则只需添加其他组件（例如<button>带有onClick方法的），您就可以进行;）。

— Guilherme Oderdenge

23

我不认为这是一般使用的好模式。链接将运行您的onClick事件，然后导航到该路线，因此导航到新路线会稍有延迟。更好的策略是使用“ to”道具导航到新路线，并在新组件的componentDidMount（）函数中触发hello函数或任何其他函数。它会为您提供相同的结果，但路线之间的过渡要平滑得多。

对于上下文，我在使用链接上的onClick事件更新redux存储时注意到了这一点，就像在这里一样，这导致在安装新路由的组件之前造成〜.3秒的白屏延迟。没有涉及到api调用，所以我惊讶于延迟如此之大。但是，如果您只是控制台记录“ hello”，则延迟可能不会很明显。

— 双节棍
source

我的当前组件中有一个回调URL，onClick在转换为新路由之前，我将其保存在cookie中。我不会在下一个组件中获得该回调URL，因此我需要在过渡本身之前进行此操作。您还有其他选择吗？PS：即使刷新后也应该可以访问回调URL，因此可以将其保存在存储区中。

— Parth Mistry '18

1

如果您正在使用反应导航：我会说不要使用链接，而只需使用TouchableOpacity或TouchableWithoutFeedback，那么在onPress函数中，您可以导航并将URL作为导航参数传递

onPress={() => {             this.props.navigation.navigate('NameOfNextScreen', {               callbackUrl: 'http://.callbackUrl.com',             });

如果您不使用反应导航I只会使用Link的onClick而不必担心性能问题。它可能不会引起注意。

— 双节棍

好建议！谢谢！

— aspiringsoftwaredev