在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
);
);
},
}];