第二次单击不使用React在DetailsList中呈现

Question

在detailsList（Office结构组件）中，注释以行（CheckOut the Screen）显示。每行都有＆＃34; ...更多＆＃34;链接。当第一次单击链接（... more）时，将在textArea中展开文本。再次，如果我点击相同的链接，它应该崩溃。喜欢开/关。但是，对于DetailsList中的同一行，COLLAPSE DOESN＆＃39; HAPPEN。但是，如果我点击＆＃34; ...更多＆＃34;链接在另一行，而不是崩溃。

另外，虽然调试器来了

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
                );

            );
        },
    }];