在 Office UI Fabric React DetailsList 中禁用行

Question

我正在尝试有条件地禁用 OUIF DetailsList 中某些行上的鼠标单击事件。但我似乎无法让它发挥作用。我尝试覆盖 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";
}

Answer 1

我会将函数绑定到 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>

Answer 2

好的，我可以再次回答我自己的问题。 Selection 对象确实有一个 canSelectItem 函数来检查用户是否应该能够 select 某些项目。此函数应 return 一个布尔值，它从数组中获取当前 selected 的项目，以便您可以轻松检查值。我用解决方案编辑了上面的代码。

在 Office UI Fabric React DetailsList 中禁用行

Disable rows in an Office UI Fabric React DetailsList

typescript

reactjs

office-ui-fabric