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

时间:2018-02-27 13:36:59

标签: javascript reactjs office-fabric

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

另外,虽然调试器来了

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

            );
        },
    }];

0 个答案:

没有答案