[英]How can I prevent a click event from executing the same query when the triggering link is clicked twice in a row
[英]How can I prevent a row click when I click a React component link within that row?
我有一个网格,我希望能够单击该行以进入“详细信息”视图,同时还具有单击快捷方式链接而不会触发“详细信息”视图。 这是我的代码(为简洁起见删除了一些代码):
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>
);
}
});
问题-尽管单击“批准”链接成功发送了api调用以批准用户,但它还会触发“ onRowClick”功能,然后用户进入“详细用户”视图,我不想发生这种情况。
有什么想法吗?
e.preventDefault()不会停止将事件传播到父级,因为您需要e.stopPropagation()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.