Question

我正在使用Dialog组件显示一系列可供用户选择的标记。 Web部件具有两个视图。登陆视图显示了所有的钩子，并可以单击并保存它们。该部分正在工作：

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

在第二个图像中，我单击了Dialog组件中的Sales标签，但在提单视图中是sales标签，这是红色，而应该在Dialog组件中是红色。

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

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组件使用相同的render方法和相同的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组件中获得了单击的元素？

最诚挚的问候！

在React Spfx中使用Fabric UI对话框

0 个答案: