如何替换 UI Fabric DetailsList 组件中的复选框

Question

如何用普通方形 CheckBox 组件替换 office-ui-fabric-react 中 DetailsList 的圆形复选框？我看到 onRenderCheckbox 所以我尝试这样的事情：

onRenderCheckbox={(props) => (<Checkbox checked={props.checked} />)}

或者

onRenderCheckbox={(props) => (<Checkbox {...props} />)}

我可以看到方形复选框，但我无法选择它。这样做的正确方法是什么？

提前致谢...

Answer 1

当您渲染Checkbox组件时，它会自行处理点击（因此它不会渗透到行，因此它可以相应地切换选择），因此您需要使用pointer-events: none样式来防止它。

onRenderCheckbox(props) {
    return (
        <div style={{ pointerEvents: 'none' }}>
            <Checkbox checked={props.checked} />
        </div>
    );
}

在这里查看：https : //codepen.io/anon/pen/zQXEPr