reactjs - 在 React Spfx 中使用 Fabric UI 对话框

Question

我正在使用 Dialog 组件来显示用户可以从中选择的一系列标签。Web 部件有两个视图。登陆视图显示所有 thags 以及单击它们并保存它们的可能性。那部分正在工作：

装货视图

第二个视图是 Dialog 组件本身，这里的问题是，当用户单击一个标签时，它是第一个对单击事件做出反应的视图，而 Dialog 组件没有显示任何更改。（改变我的意思是不同的颜色）。

对话框视图

在第二张图片中，我单击了 Dialog 组件中的 Sales 标签，但它是 lading 视图中的 sales 标签获得红色，而它应该是 Dialog 组件中获得红色的标签。

这是我的应用程序中的渲染方法：

public render(): JSX.Element {
    return <div className={styles.tags}>
        <div className={styles.tagsCloud}>
            {this.state.items.map((tag, index) => this.renderTags(tag, index))}
        </div>
        <div>
            <a className={styles.allItemsLink} href="#" onClick={this._showDialog}>View all topcis</a>
        </div>
        {this.state.showButton == true ?
            <div>

                <DefaultButton
                    text="Done"
                    style={{ backgroundColor: '#ff0033', color: '#ffffff' }}
                    onClick={() => this.savetags()}
                />
            </div> : null
        }
        <Dialog
            hidden={this.state.hideDialog}
            onDismiss={this._closeDialog}
            containerClassName={'ms-dialogMainOverride ' + styles.textDialog}
            modalProps={{
                isBlocking: true,
            }}>

            <div className={styles.tagsDialogContainer}>
                {this.state.items.map((t, index) => this.renderTags(t, index))}
            </div>
            <DialogFooter>
                <DefaultButton
                    style={{ backgroundColor: '#ff0033', color: '#ffffff' }}
                    onClick={this._closeDialog}
                    text="Done"
                />
            </DialogFooter>
        </Dialog>
    </div>
}

这是呈现标签的方法：

private renderTags(tag: Tag, index: number) {

    return <div className={`${styles.tag} ${tag.active == true ? styles.tagActive : ''}`}
        onClick={(e) => { e.stopPropagation(); this.collectTags(tag, index); return false; }}>
        <span># {tag.title} <i className="ms-Icon ms-Icon--CirclePlus"></i></span>
    </div>
}

登陆页面和 Dialog 组件使用相同的渲染方法和相同的 collectTags 方法在点击的标签被保存之前拾取它们。collectTags 方法如下所示：

private collectTags(tag, index): any {
    let selectedTags: Tag[] = this.state.selectedTags;
    var allItems = this.state.items;
    allItems[tag.id - 1].active = true;

    selectedTags.push(tag);

    this.setState({
        items : allItems,
        showButton: true,
    })
}

为什么 Dialog 组件对单击事件没有反应？并且装货视图正在从对话框组件中获取单击的元素？

此致！

标签： reactjsspfx