只有当我单击 Ant Design 中行的某个部分时，有没有办法使“expandRowByClick”可执行？答案

【问题标题】：Is there a way to make 'expandRowByClick' executable only if I click a certain part of the row in Ant Design?只有当我单击 Ant Design 中行的某个部分时，有没有办法使“expandRowByClick”可执行？
【发布时间】：2019-01-18 21:58:42
【问题描述】：

我正在尝试开发一个使用 Ant Design 内置的 expandRowByClick 函数的可扩展表格行。该函数确定“是否通过单击整行中的任意位置来扩展行”，但我想看看是否有办法让它仅适用于行的某个部分。我在每一行上都加入了一个开关，它将决定是否包含或省略未展开的行所隐藏的内容。目前，当我单击切换时，我为onExpandedRowsChange 执行的功能被执行，并且切换开关的功能被完全跳过。

我已尝试通过查找event.target 来确定我是否单击了切换按钮。但是由于 React 旨在使用 JS 将 HTML 元素放入 DOM，而不是传统的 JS 直接在 DOM 上操作 HTML 元素，所以我只得到<react></react>。我深入研究了 react 事件中的所有属性，但找不到任何有用的东西。

我想如果有某种方法我可以确定我正在单击切换，而不仅仅是我可以在我的 onExpandedRowsChange 函数中运行一个条件来评估是否继续使用 onExpandedRowsChange 函数或e.stopPropagation() 并运行切换功能。但到目前为止，这种潜在的解决方案还没有成功。

我还尝试将ref 用于切换开关，这样我就可以尝试从this.refs... 获取HTML，但是当我尝试在函数上使用.bind(this... 时，它不会执行。

这是我的桌子：

<Table
            rowClassName={record => record.diminishingReturn ? style.driverRow : style.folderRow}
            className={style.scnTable}
            columns={columns}
            expandRowByClick
            bordered
            defaultExpandAllRows={me.state.expandAll}
            size="middle"
            rowKey={'activityGroupName'}
            dataSource={categorizedData}
            pagination={false}
            loading={me.props.data.get('loading')}
            expandedRowKeys={this.props.expandedRowKeys}
            onExpandedRowsChange={(rows) => { this.checkExpandedRows(rows)}}
          />

带有拨动开关的行：

<div className={ this.props.expandedRowKeys.includes(r.activityGroupName) ? style.folderExpanded : null}> 
   <div style={{position: 'absolute', left: 10 + 'px', top: 10 + 'px', zIndex: 1000}} ref='yes'>
      <input id={r.activityGroupName} className={styles.inputYo} onChange={me.onOmitChange.bind(me, 'budgetPreference', r)} type="checkbox" checked={!!r.enabled}/>
      <label htmlFor={r.activityGroupName} className={styles.labelYo} style={{cursor: 'pointer'}}>Toggle</label>
   </div>
   <h2 style={{marginLeft: 40 + 'px'}}><Icon type="folder" />&nbsp;&nbsp;&nbsp;{r.activityGroupName}&nbsp;({r.children.length})</h2>
   <Icon type={'caret-down'} style={ this.state.expandedRowKeys.includes(r.activityGroupName) ? {transform: 'rotate(180deg)'}: null} />
</div>

行扩展功能：

checkExpandedRows = (rows) =>{
   event.stopPropagation()
   this.props.checkExpandedRows(rows)
}

还有切换功能：

onOmitChange = (x, y, z) =>{
  if (document.getElementById(y.activityGroupName).checked == true) {
    this.onEnableDisableRowForOptimization(y, "enable")
  } else if (document.getElementById(y.activityGroupName).checked == false){
    this.onEnableDisableRowForOptimization(y, "disable")
  }
}

checkExpandedRows 函数应该起作用，但前提是该行的任何部分比切换开关被单击。如果单击切换，则停止行扩展并执行onOmitChange 函数。我没有在行扩展函数中包含条件，因为我不确定应该为它写什么。

【问题讨论】：

澄清一下，您希望该行在单击时展开，除非单击一列特定列？
我应该澄清一下，该行本质上只是一列。我根据数据属性有条件地渲染列，如果该属性不存在，则渲染一列行，其 col-span 为 4，其他列的 col-span 为 0。这意味着渲染一行指示存在其他行（在其展开时显示的行）的数据类型。我可以尝试将切换开关放在它自己的小列中，但整行是否仍然可以点击？

标签： javascript reactjs antd

【解决方案1】：

是的，你可以。使用rowExpandable 只需根据您的情况返回true 或false。

rowExpandable: record => record.attachments.length > 0

【讨论】：