如何将行展开图标更改为自定义按钮?

时间:2018-12-17 01:00:53

标签: reactjs antd

我想创建自己的按钮并通过单击他来展开行。在方法“ _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> });

0 个答案:

没有答案