为ReactRouter链接

Question

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

＆＃13;

＆＃13;

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;

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

请说明我的代码有什么问题。

Answer 1

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

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