How can I prevent a row click when I click a React component link within that row?

Question

I have a grid, and I would like to have the ability to click the row to enter into a "detail" view, while also having shortcut links to click that do not trigger the "detail" view. Here is my code (some code removed for brevity):

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>
        );
    }
});

The problem is that the above code is outside of the users grid class, so I'm not sure how easy it is to implement a boolean to prevent the row click from going through.

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>
        );
    }
});

The problem - although clicking the "approve" link successfully sends off the api call to approve the user, it also triggers the "onRowClick" function, and then the user is in "detailed user" view, which I don't want to happen.

Any thoughts?

Answer 1

e.preventDefault() doesn't stop event propagation to parents, for that you need e.stopPropagation()