禁用Office UI Fabric React DetailsList中的行
禁用Office UI Fabric React DetailsList中的行
提问于 2017-08-16 23:04:43
我试图有条件地禁用OUIF DetailsList中某些行上的鼠标单击事件。但我似乎不能让它工作。我尝试覆盖onRenderRow并将CheckboxVisibility设置为none，但仍然可以单击。然后我试着用div包住它，并将其设置为disabled。但是，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";
}回答 2
Stack Overflow用户
回答已采纳
发布于 2017-08-16 23:45:54
好了，我再一次回答我自己的问题。Selection对象确实有一个canSelectItem函数，用于检查用户是否应该能够选择某些项目。此函数应返回一个布尔值，并从数组中获取当前选定的项，以便您可以轻松检查值。我用解决方案编辑了上面的代码。
Stack Overflow用户
发布于 2017-08-16 23:28:31
我会先将一个函数绑定到onClick，然后再绑定到preventDefault或stopPropagation？另外，编辑CSS以移除cursor效果，使其看起来像一个普通的HTML标签。
类似于：
if(state === "disabledState"){
let onClickFunc = this.preventClick.bind(this);
} else {
let onClickFunc = this.normalClick.bind(this);
}
return <div onClick={onClickFunc}>{defaultRender(props)}</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45717136
复制相关文章
相似问题
腾讯云开发者
