2-й клик не отображается в DetailsList с использованием React

Question

В detailsList (компонент Office Office) комментарии отображаются в строках ( отметьте на экране). Каждая строка имеет ссылку "... еще". Когда ссылка (... больше) нажимается в первый раз, это расширяет текст в textArea. Опять же, если я нажму на ту же ссылку, она должна рухнуть. как вкл / выкл. Тем не менее, COLLAPSE НЕ ПРОИСХОДИТ для той же строки в DetailsList. Но, если я нажму на ссылку "... еще" в другом ряду, произойдет сбой.

Кроме того, хотя отладчик приходит к

columns={this._approvercolumns}

но все же это не идет внутри _approvercolumns(). Зачем? Я скучаю по какой-либо собственности. Я уверен, что состояние и реквизит меняются.

Примечание: я получаю строку idx правильно. Я удалил этот код, чтобы сделать код короче.

Ниже приведен краткий код для ясности.

   public render(): JSX.Element {
    let result: JSX.Element;
    let { canSave, readOnly, revision, workflownames, approverKey, wfapproverhistory, isCalloutVisible } = this.state;
    switch (this.state.displayState) {
        case ILMDialog.DialogDisplayStates.Success:
            result =
                 <div>
                    <DetailsList
                        items={wfapproverhistory}
                        columns={this._approvercolumns}
                        setKey='WFApproverHistory'
                        layoutMode={DetailsListLayoutMode.justified}
                        isHeaderVisible={true}
                        checkboxVisibility={CheckboxVisibility.hidden}
                        className='detailedlist'
                    />
                  </div> 
            break;
    }
    return result;
}
//...more link is here
private _approvercolumns: IColumn[] = [
    {
        key: 'column4',
        name: 'Comments',
        fieldName: 'ApproverComments',
        data: 'string',
        onRender: (item: WorkflowHistory) => {
            return (
                <div>
                    (<div>
                            <Link onClick={this._showApproverComments.bind(this)}>...more</Link>
                     </div>
                    );

                    {(this.state.isCalloutVisible && this.state._selectedGlobalIndex == this.state.wfapproverhistory.indexOf(item)) ?
                           <div> (<TextField value={item.ApproverComments} />)</div>
                        : (null)} // this null will collapse the textarea

                </div>
            );
        },
    }];

private _showApproverComments(item)
{
    let stateNew = this.state;
    stateNew._selectedGlobalIndex = ev.currentTarget.getAttribute("title");//I am getting corret row idx
    stateNew.isCalloutVisible = !stateNew.isCalloutVisible;
    stateNew.displayState = ILMDialog.DialogDisplayStates.Success;
    this.setState(stateNew);
}

РЕШЕНИЕ:-

Я добавил еще один штат

 case ILMDialog.DialogDisplayStates.ClosedComments:
            result =
                <Dialog
                    isOpen={this.state.hideDialog}
                    onDismiss={this._showDialog.bind(this)}
                    isBlocking={true}
                    title="Workflow History"
                    containerClassName='ms-dialogMainOverride dialogstyle s4-wpActive'
                    type={DialogType.normal}
                >

                    <DetailsList
                        items={wfapproverhistory}
                        columns={this._closeapprovercolumns}
                        setKey='WF'
                        layoutMode={DetailsListLayoutMode.justified}
                        isHeaderVisible={true}
                        checkboxVisibility={CheckboxVisibility.hidden}
                        className='detailedlist'
                    />

                </Dialog>;
            break;


 private _closeapprovercolumns: IColumn[] = [        
    {
        key: 'column4',
        name: 'Comments',
        fieldName: 'ApproverComments',                     
        onRender: (item: WF) => {
            return (
                (<div>
                        <Link onClick={this._showApproverComments.bind(this)}>...more</Link>
                 </div>

                // This is copy from _approvercolumns. I have just removed the div which is declare here in _approvercolumns. this will make div as null
                );

            );
        },
    }];