Использование диалогового окна Fabric UI в React Spfx - PullRequest
Новая
       10

Использование диалогового окна Fabric UI в React Spfx

0 голосов
/ 19 февраля 2019

Я использую компонент Диалог, чтобы показать серию тегов, из которых пользователь может выбирать.Веб-часть имеет два представления.Посадочный вид показывает все тэги и возможность нажать на них и сохранить их.Эта часть работает:

Ladning view

Второе представление - это сам компонент Dialog, проблема в том, что когда пользователь нажимает на тег, это первыйпосмотреть, кто реагирует на событие нажатия, и компонент Dialog не показывает никаких изменений.(с изменением я имею в виду другой цвет).

Диалоговое представление

Во втором изображении я щелкнул тег Sales в компоненте Dialog, но это тег продажв концевом представлении тот, который получает красный цвет, или тот, который в компоненте 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 не реагирует на событие click?а передовое представление получает выбранный элемент из компонента Dialog?

С уважением!

...