javascript - React-Router:为什么 <Link> 组件的 onClick 处理程序不会调度我的操作?

标签 javascript reactjs redux react-router react-redux

我想要 React-Router 的 <Link>单击时触发一个函数,但它看起来像 <Link>在函数有机会触发之前导航到下一页。

我的组件看起来与此类似:

<Link to={`/path/to/${foo}`} onClick={() => myFunc(foo, bar)}>
  <div>This is my Link</div>
</Link>

foobar是从父组件传下来的 Prop 。

但是,如果我调用 e.preventDefault ,任何后续功能都可以正常工作:

<Link
    to={`/path/to/${foo}`}
    onClick={(e) => e.preventDefault(); console.log('This works!')}>
  <div>This is my Link</div>
</Link>

我想我可以做类似的事情,然后以编程方式导航到我的路线,但必须有更好的(即更少 hack-y)方法来实现这种效果。

有没有人有任何建议,这可能对我有帮助?

最佳答案

这不是一个直接的解决方案,但你可以尝试使用简单的 a 元素,而不是使用 Link 组件,并移动到 onClick 中所需的路由 处理程序:

import { browserHistory } from 'react-router';

<a onClick={
  browserHistory.push(`/path/to/${foo}`)
  myFunc(foo, bar)
}>
  <div>This is my Link</div>
</a>

关于javascript - React-Router:为什么 <Link> 组件的 onClick 处理程序不会调度我的操作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38329015/

相关文章:

reactjs - Mocha & Enzyme - 如何测试 React 组件没有子组件?

javascript - React JS 中的 Angular JS ng-repeat 过滤器替代方案

Javascript:无法获得 Promises.all 响应

javascript - 我怎样才能停止 redux Action ?当我出错时

javascript - 获取 typescript 中单独数组、AddedList和RemovedList中两个数组之间的差异

ASP.NET 中的 Javascript 命名空间声明

javascript - 从 Reducer 函数中访问 Redux 中的 Store 状态

javascript - 使用 `document.currentScript.ownerDocument.createElement` 创建的图像(从 <link> 导入的 HTML)永远不会加载

javascript - 如何在不依赖 jQuery 的情况下将此 jQuery 代码转换为 Javascript?

javascript - React PureComponent 会比 Component 慢吗?如何?