禁用Office UI Fabric React DetailsList中的行

Question

我试图有条件地禁用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";
}

Answer 1

好的，我可以回答我自己的问题。Selection对象确实具有canSelectItem函数，以检查用户是否应该能够选择某些项目。此函数应返回布尔值，并且它会从数组中获取当前选定的项，因此您可以轻松检查值。我使用解决方案在上面编辑了代码。