我想创建自己的按钮并通过单击他来展开行。在方法“ _renderActionRow”中,我创建按钮,如果单击按钮“定义”,则调用“ _onTableRowExpand”,并检查行是否展开或折叠。如果我使用默认按钮“ +”,则该方法效果很好,但是如果我从_renderActionRow调用它,则该方法无效。有什么想法可以解决吗?
_renderActionRow = (record, i18n) => {
const actionColumnBuilder = new TableActionColumnBuilder(i18n);
if (this.state.tokensData.some(token => token.stepId === record.id)) {
actionColumnBuilder.button(i18n.t`Retry`, {marginRight: 5}, form => {
});//TODO
actionColumnBuilder.button(i18n.t`Skip`, {marginRight: 5}, () => {
});//TODO
}
actionColumnBuilder.button(i18n.t`Definition (${record.realizationStepId})`, {marginRight: 5}, () => {
if (!this.state.expandedKeys.some(key => key === record.id)) {
this._onTableRowExpand(true, record);
} else {
this._onTableRowExpand(false, record);
}
});
return actionColumnBuilder.build();
};
_onTableRowExpand = (isExpanded, record) => {
const previousExtendedKeys = this.state.expandedKeys;
const newExpandedKeys = isExpanded ? previousExtendedKeys.concat(record.id) : previousExtendedKeys.filter(key => key !== record.id);
if (!this.state.downloadedStepIdToInstance[record.id]) {
this._handleRealizationStepRequest(record.id);
}
this.setState({expandedKeys: newExpandedKeys});
};
return (
<div>
{activeView === DETAILS_VIEW_NAME &&
<div>
<HidableCard style={{maxHeight: 250}}
title={i18n.t`Process steps`}
toggleDetailsVisibilityCallback={this.recalculateComponentHeight}
i18n={i18n}
initialShouldShowDetails={this._showProcessStepsCard}
ref={ref => this._processStepCard = ref}
component={
<JiverTable tableColumnsFormat={this._getProcessStepsTableColumnsFormat(i18n)}
tableFeatureChangeHandler={this._handleProcessStepTableSortChange}
data={this.state.processStepData || []}
i18n={i18n}
expandIconAsCell={false}
expandIconColumnIndex={6}//set to -1 for hide icon '+'
expandedRowRender={record => this._createExpandedTables(record)}
expandedRowKeys={this.state.expandedKeys}
onExpand={this._onTableRowExpand}
sorter={{
sortColumn: {dataIndex: processStepsSort.orderBy},
sortOrder: processStepsSort.orderDirection === 'asc' ? 'ascend' : 'descend'
}}
ref={ref => this._processStepTable = ref}/>
}/>
</div> });