Как я могу предотвратить щелчок строки, когда я нажимаю ссылку на ссылку React внутри этой строки?

Question

У меня есть сетка, и я хотел бы иметь возможность щелкнуть строку, чтобы войти в «подробное» представление, а также иметь ярлыки ссылок, которые не запускают «подробный» вид. Вот мой код (часть кода удалена для краткости):

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

Проблема - хотя нажав на кнопку «одобрить» ссылка успешно отсылает вызов апи одобрить пользователя, он также запускает функцию «onRowClick», а затем пользователь находится в «подробном пользователя» вид, который Я не хочу.

Любые мысли?

Answer 1

e.preventDefault() не останавливает распространение события родителям, для этого вам нужно e.stopPropagation()