如何在更新到Fabric 6后在`CommandBar`中获取搜索框

Question

我已将Fabric更新到版本6.6.1，并注意到isSearchBoxVisible组件中缺少属性CommandBar。

如何替代它？我在我的应用程序中广泛使用它。

Answer 1

据我所知，您可以使用onRender的IContextualMenuItem属性。我用它在我的CommandBar中显示自定义控件：

const items: IContextualMenuItem[] = [];

items.push({
    key: "ArchivedToggle",
    name: "Archived Toggle",
    onRender: this.renderArchivedToggle.bind(this),
});

在渲染功能中：

<CommandBar
    className={styles.actionBar}
    items={[]}
    farItems={items}
/>

在自定义渲染功能中，您基本上可以创建任何想要的内容。在这种情况下，它是一个Toggle，但您可以通过搜索框替换它。

private renderArchivedToggle() {
    <Toggle
        defaultChecked={props.defaultChecked}
        label=""
        onText={(_spPageContextInfo.currentLanguage === Language.DUTCH) ? "Archief" : "Archive"}
        offText={(_spPageContextInfo.currentLanguage === Language.DUTCH) ? "Archief" : "Archive"}
        onChanged={(value: boolean) => props.updateValueHandler(value)}
    />
}

结果：