reactjs - 更新到 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，但您当然也可以用 SearchBox 替换它。

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)}
    />
}

结果：