当我单击该行中的 React 组件链接时，如何防止该行单击？答案

【问题标题】：How can I prevent a row click when I click a React component link within that row?当我单击该行中的 React 组件链接时，如何防止该行单击？
【发布时间】：2015-09-28 15:09:02
【问题描述】：

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

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

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

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”功能，然后用户进入“详细用户”视图，我没有想要发生。

有什么想法吗？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

e.preventDefault() 不会停止向父母传播事件，因为您需要 e.stopPropagation()

【讨论】：

谢谢。我不知道这个功能。很简单。