javascript - 单击该行中的 React 组件链接时，如何防止单击该行？

Question

我有一个网格，我希望能够单击该行以进入“详细信息” View ，同时还可以单击不会触发“详细信息” View 的快捷链接。这是我的代码(为简洁起见删除了一些代码):

var ActionsColumn = React.createClass({

    onClickEdit: function(e) {
        e.preventDefault();
    },

    approveUser: function(organizationUserID) {
        OrganizationActions.approveUser(organizationUserID);
    },

    render: function () {
        var organizationUserID = this.props.rowData._id;

        return (
            <span className='hover-actions'>
                <a onClick={this.onClickEdit} className={(this.props.rowData.is_pending_approval) ? 'disabled' : ''}>edit</a>| 
                {(this.props.rowData.is_pending_approval) 
                    ? <a onClick={this.approveUser.bind(this, organizationUserID)}>approve</a>
                    : (this.props.rowData.is_suspended)
                    ? <a onClick={this.activateUser.bind(this, organizationUserID)}>activate</a>
                    : <a onClick={this.suspendUser.bind(this, organizationUserID)}>suspend</a>
                }|
                <a onClick={this.deleteUser.bind(this, organizationUserID)}><i className='fa fa-trash' /></a>
            </span>
        );
    }
});

问题是上面的代码在用户网格类之外，所以我不确定实现一个 bool 值来防止行点击通过是多么容易。

var Users = React.createClass({

    mixins: [Reflux.connect(OrganizationStore)],

    columns: ['full_name', 'email', 'is_pending_approval', 'role_name', 'actionsColumn'],

    columnMetaData: [
        {
            'columnName': "full_name",
            'displayName': "Name",
            'order': 1,
            'visible': true
        },
        {
            'columnName': "email",
            'displayName': "Email",
            'order': 2,
            'visible': true,
            'cssClassName': 'email-column'
        },
        {
            'columnName': "is_pending_approval",
            'displayName': "Status",
            'order': 3,
            'visible': true,
            'customComponent': StatusColumn     
        },
        {
            'columnName': "role_name",
            'displayName': "Role",
            'order': 4,
            'visible': true,
            'cssClassName': 'role-column'
        },
        {
            'columnName': 'actionsColumn',
            'displayName': '',
            'order': 5,
            'customComponent': ActionsColumn,
            'visible': true,
            'cssClassName': 'actions-column'
        }
    ],

    onRowClick: function (e) {

        var user = e.props.data;

        // Cannot click a user that is pending approval.
        if (user.is_pending_approval) {
            return;
        } 

        this.setState({detailedUser: user});
    },

    render: function () {

        var organization = this.props.organization;

        return(
            <section className='organization-users-view'>
                <div className='list-header'>
                    <div className='menu-bar'>
                        <a onClick={this.onAllUsersDropdownClick}>
                            All Users<i className="fa fa-caret-down" />
                        </a>
                        <button className='btn btn-primary btn-xs menu-button' onClick={this.addNewUser}><i className="fa fa-user-plus" />Invite User</button>
                    </div>
                </div>
                {(this.state.detailedUser) 
                    ?
                        <UserView organization={organization} user={this.state.detailedUser} returnToList={this.returnToList} setUser={this.setUser}/>
                    :
                        <Griddle
                            results={organization.users}
                            columnMetadata={this.columnMetaData}
                            columns={this.columns}
                            resultsPerPage={10}
                            useGriddleStyles={false} 
                            noDataMessage={"This organization currently has no users."}
                            tableClassName={"table table-hover table-responsive"}
                            gridClassName={"grid-container"}
                            onRowClick={this.onRowClick} /> 
                }
            </section>
        );
    }
});

问题 - 虽然点击“approve”链接成功发送了 api 调用以批准用户，但它也触发了“onRowClick”函数，然后用户处于“详细用户” View ，我没有想要发生。

有什么想法吗？

Answer 1

e.preventDefault() 不会停止向父级的事件传播，为此你需要 e.stopPropagation()