diff --git a/docs/api/components/Link.md b/docs/api/components/Link.md index 6cbb567b1c..ba86977208 100644 --- a/docs/api/components/Link.md +++ b/docs/api/components/Link.md @@ -27,6 +27,13 @@ name through the link's properties to the resulting url. The className a `Link` receives when it's route is active. Defaults to `active`. +### `onClick` + +A custom handler for the click event. Works just like a handler on an `` +tag - calling `e.preventDefault()` or returning `false` will prevent the +transition from firing, while `e.stopPropagation()` will prevent the event +from bubbling. + ### *others* You can also pass props you'd like to be on the `` such as a title, id, or className. diff --git a/modules/components/Link.js b/modules/components/Link.js index 6fa461af31..ebdffe368d 100644 --- a/modules/components/Link.js +++ b/modules/components/Link.js @@ -52,7 +52,8 @@ var Link = React.createClass({ propTypes: { to: React.PropTypes.string.isRequired, activeClassName: React.PropTypes.string.isRequired, - query: React.PropTypes.object + query: React.PropTypes.object, + onClick: React.PropTypes.func }, getDefaultProps: function () { @@ -108,13 +109,23 @@ var Link = React.createClass({ }); }, - handleClick: function (event) { + handleClick: function(event) { + var allowTransition = true; + var ret; + + if (this.props.onClick) + ret = this.props.onClick(event); + if (isModifiedEvent(event) || !isLeftClick(event)) return; + if (ret === false || event.preventDefaulted === true) + allowTransition = false; + event.preventDefault(); - transitionTo(this.props.to, this.getParams(), this.props.query); + if (allowTransition) + transitionTo(this.props.to, this.getParams(), this.props.query); }, render: function () {