我正在尝试有条件地禁用 OUIF 详细信息列表中某些行上的鼠标单击事件。但我似乎无法让它工作。我尝试覆盖 onRenderRow 并将 CheckboxVisibility 设置为 none,但它仍然是可点击的。然后我尝试在它周围包裹一个 div 并将其设置为禁用。但是,React 中的 div 似乎没有 disabled 属性。那么有人可以在这里帮助我吗?
<DetailsList
items={this.state.items}
columns={this.getColumns()}
selection={this.selection}
selectionMode={SelectionMode.multiple}
onRenderRow={this.renderRow.bind(this)}>
</DetailsList>
private renderRow(props: IDetailsRowProps, defaultRender: any){
let state = this.state.items[props.itemIndex].workflowState;
if(state === "disabledState"){
//props.checkboxVisibility = CheckboxVisibility.hidden; <- Not working
// return <div disabled={true}>{defaultRender(props)}</div> <- Not working
return defaultRender(props);
}
else{
return defaultRender(props);
}
}
解决方案:
this.selection = new Selection({ canSelectItem: this.canSelectItem.bind(this), onSelectionChanged: this.clickRow.bind(this) });
<DetailsList
items={this.state.items}
columns={this.getColumns()}
selection={this.selection}
selectionMode={SelectionMode.multiple}
onRenderRow={this.renderRow.bind(this)}>
</DetailsList>
private canSelectItem(item: any): boolean {
return item.state !== "disabledState";
}