li 元素中的按钮显示更多详细信息

Question

我想在单击记录时显示更多详细信息的模式 window。我正在使用 OfficeUI。

我的parent组件：

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

我的child:

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

当我在 parent 组件上单击我的 DeafultButton 时，它会为每个项目调用并显示 Modal，我该如何限制这只有一个当前点击的项目。我试过 i: number，但我想不通。

Answer 1

您的父组件只有一个标志来存储 showPopup。这意味着当您单击其中一个按钮时，您会为整个父组件设置此标志，这意味着您的子组件的整个列表都会被评估，并且 this.state.showPopup 将为真。

您需要找到一种方法来将单击按钮的效果限制在按钮被单击的项目上。

例如，您可以不在父组件上设置 showPopup 标志，而是在 item.

上设置

这可行，但您必须重新考虑包含 ModalPopUpItem.

的方式

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

Answer 2

由于您为每个 child 使用单一状态，因此一旦您将 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>
);

由于此方法一次只存储一个 ID，这意味着只会显示一个模态框。如果你当时想显示更多模态，你可以把它改成数组什么的。

li 元素中的按钮显示更多详细信息

Button in li element to display more details

reactjs

office-ui-fabric

spfx