Кнопка в элементе li для отображения более подробной информации - PullRequest
Новая
       27

Кнопка в элементе li для отображения более подробной информации

0 голосов
/ 01 октября 2018

Я хотел бы отобразить модальное окно с более подробной информацией, когда я нажимаю на запись.Я использую OfficeUI.

Мой родительский компонент: 

public render() {
    {
        return (
            <div>
                {this.props.items
                    .map((item: IListItem, i: number): JSX.Element => <ul className="list-group">
                        <li className="list-group-item">
                            <div className={styles.text}>
                                <p>{item.Id}</p>
                            </div>
                            <DefaultButton onClick={this.showModalEvent} text="Open Modal" />
                            {this.state.showPopup
                                ? <ModalPopUpItem item={item} 
                                        showModalState={this.state.showPopup}
                                        showModal={this.showModalEvent}/> : null
                            }
                        </li>
                    </ul>)}
            </div>
        );
    }



    private showModalEvent = (): void => {
    this.setState({ showPopup: !this.state.showPopup });
}

Мой ребенок: 

export class ModalPopUpItem extends React.Component<IModalProps> {
    public render() {
        return (
            <Modal
                isOpen={this.props.showModalState}
                onDismiss={this.props.showModal}
                isBlocking={false}
                containerClassName="ms-modalExample-container">
                <div className="ms-modalExample-header">
                    <span>{this.props.item.date}</span>
                </div>
            </Modal>
        );
    }
}

Когда я нажимаю мой DeafultButton на родительском компоненте, он вызывает и отображает Модальный для каждого элемента, как я могу ограничить это только одним текущим выбранным элементом?Я пытался с i: номер , но я не мог понять это.

Ответы [ 2 ]

0 голосов
/ 01 октября 2018

Поскольку вы используете одно состояние для каждого дочернего элемента, поэтому после изменения значения this.state.showPopup на true будет отображаться каждый модальный режим.Таким образом, вы можете изменить метод showModalEvent. 

private showModalEvent = (id: number): void => {
    this.setState({ showPopupId: id });

, и рендер будет выглядеть как 

return (
  <div>
    {this.props.items
      .map((item: IListItem, i: number): JSX.Element => <ul className="list-group">
        <li className="list-group-item">
          <div className={styles.text}>
            <p>{item.Id}</p>
          </div>
          <DefaultButton onClick={() => this.showModalEvent(item.Id)} text="Open Modal" />
          {this.state.showPopupId === item.Id
            ? <ModalPopUpItem item={item}
              showModalState={this.state.showPopup}
              showModal={this.showModalEvent} /> : null
          }
        </li>
      </ul>)}
  </div>
);

Поскольку этот метод хранит только один идентификатор за раз, это означает толькоПоявился один модал.Если вы хотите показать более модальный в то время, вы можете изменить его на массив или что-то еще.

0 голосов
/ 01 октября 2018

Ваш родительский компонент имеет только один флаг для хранения showPopup.Это означает, что когда вы нажимаете одну из ваших кнопок, вы устанавливаете этот флаг для всего родительского компонента, а это означает, что весь список ваших дочерних компонентов оценивается, и this.state.showPopup будет истинным.

Вам необходимонайти способ ограничить эффект нажатия кнопки элементом, на котором была нажата кнопка.

Можно, например, установить флаг showPopup не на родительском компоненте, а на item.

Это может сработать, но вам придется пересмотреть способ включения ModalPopUpItem. 

private showModalEvent = (item): void => {
    item.showPopup = !item.showPopup;
}
.
...