为 ReactRouter 链接创建自定义 onClick 处理程序时出错答案

【问题标题】：Error creating custom onClick handler for ReactRouter Links为 ReactRouter 链接创建自定义 onClick 处理程序时出错
【发布时间】：2016-12-19 10:56:57
【问题描述】：

我正在尝试编写一个门户列表页面，它是一个门户表，每个表行都是一个到门户的链接。现在我必须对此点击采取一些自定义操作。我的代码看起来像-

var React = require('react');
var Link = require('react-router').Link;

var PortalStore = require('../../stores/portal-store');

var PortalLandingPage = React.createClass({
	getInitialState: function () {
        return PortalStore.getPortalList();
    },
    updateAuthorizationCookie: function (portalIdHash) {
        PortalStore.setPortalIdHash(portalIdHash);
        PortalStore.generateAuthToken();
        this.transitionTo('portalHome', {portalIdHash: portalIdHash});
    },
    render: function () {
        var createPortalRow = function (portal) {
            return (
                <tr key={portal.portalId}>
                    <td>
                        <Link to='portalHome'
                              params={{
                                  portalIdHash: portal.portalIdHash,
                                  contentId: portal.portalId
                              }}
                              onClick={this.updateAuthorizationCookie(portal.portalIdHash)}
                        >{portal.portalName}</Link>
                        <b></b>
                        <hr align="left" width="100%"></hr>
                    </td>
                </tr>
            );
        };
		return (
			<table className="table">
				<thead>
				<tr><th>
					Name
					<b></b>
					<hr align="left" width="100%"></hr>
				</th></tr>
				</thead>
				<tbody>
				{this.state.portalList.map(createPortalRow, this)}
				</tbody>
			</table>
		</div>);
    }
}
module.exports = PortalLandingPage;

现在的问题是，当调用上述组件的渲染方法时，它还会调用并评估每一行的 onClick 处理程序。相反，我的要求是仅当用户单击链接时才会调用 onClick 处理程序。我也试过，删除处理程序周围的括号，但它给出了编译时错误。

<Link to='portalHome'
                              params={{
                                  portalIdHash: portal.portalIdHash,
                                  contentId: portal.portalId
                              }}
                              onClick=this.updateAuthorizationCookie(portal.portalIdHash)
                        >{portal.portalName}</Link>

请提出我的代码有什么问题。

【问题讨论】：

标签： reactjs react-native react-router reactive-programming

【解决方案1】：

您正在调用要传递给 onClick 的函数，因此当事件被调用时，它将尝试调用该函数的 result（未定义）。您需要传递函数引用本身，或者由于您使用的是箭头函数，请传递一个调用您的函数的匿名函数：

onClick={() => this.updateAuthorizationCookie(portal.portalIdHash)}

【讨论】：