Есть ли способ сделать исполняемый файл «expandRowByClick» только в том случае, если я щелкну определенную часть строки в Ant Design?

Question

Я пытаюсь разработать расширяемую строку таблицы, которая использует встроенную функцию Ant Design expandRowByClick.Функция определяет «Расширить ли строку, щелкнув где-нибудь во всей строке», но я хотел посмотреть, есть ли способ заставить это применить только к определенной части строки.Я включаю переключатель в каждой строке, который будет определять, следует ли включать или не включать то, что скрыто за нерасширенной строкой.В настоящее время, когда я нажимаю на переключатель, выполняется функция, которую я выполняю для onExpandedRowsChange, и функция переключателя полностью пропускается.

Я попытался определить, нажимаю ли я переключатель, чтобы найти event.target.Но поскольку React предназначен для помещения HTML-элементов в DOM с использованием JS, а не традиционного JS-манипулирования HTML-элементами непосредственно в DOM, я просто получаю <react></react>.Я довольно глубоко изучил все атрибуты в событии реагирования, но не смог найти ничего полезного.

Я подумал, что если бы я мог каким-то образом определить, что я нажимаю на переключатель, а не только на строку, которую яможет выполнить условие в моей функции onExpandedRowsChange, которая оценивает, продолжать ли функцию onExpandedRowsChange или e.stopPropagation(), и запускать функцию переключения.Но это потенциальное решение пока не удавалось.

Я также попытался использовать ref для тумблеров, чтобы попытаться получить HTML-код из this.refs..., но когда я пытаюсь .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.Я не включил условное выражение в функцию расширения строки, потому что я не уверен, что для нее нужно написать.