我试图有条件地禁用OUIF DetailsList中某些行的鼠标单击事件。但我似乎无法让它发挥作用。我尝试重写onRenderRow并将CheckboxVisibility设置为none,但它仍然可以点击。然后我尝试在它周围包裹div并将其设置为禁用。但是,React中的div似乎没有禁用属性。那么有人可以帮助我吗?
<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";
}
答案 0 :(得分:2)
好的,我可以再回答一下我自己的问题。 Selection对象确实有一个canSelectItem函数来检查用户是否应该能够选择某些项目。此函数应返回一个bool值,它从数组中获取当前选定的项,以便您可以轻松地检查值。我用解决方案编辑了上面的代码。
答案 1 :(得分:0)
我会将函数绑定到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>