Question

当我单击记录时，我想显示更多信息的模式窗口。我正在使用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 时，它会为每个项目调用并显示 Modal ，如何将其限制为仅一个当前单击的项目。我尝试使用 i：数字，但无法弄清楚。

Answer 1

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

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

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

。

这可能有效，但是您必须重新考虑添加ModalPopUpItem的方式。

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

Answer 2

由于您对每个孩子都使用单一状态，因此一旦将import gql from "graphql-tag"; import * as React from "react"; import { Query } from "react-apollo"; const ORGANISATION_QUERY = gql` query OrganisationQuery($id: Long!) { organisation(id: $id) { tasksEnabled }}`; export class FeatureCardGraphQlComponent extends React.Component<{} {}> { public render() { return ( <Query query={ORGANISATION_QUERY} variables={{ id: 1 }}> {({ data }) => { return <div>{data}</div>; }} </Query> ); }}更改为true，就会显示每个模态。因此，您可以更改this.state.showPopup方法。

showModalEvent

，渲染结果将类似于

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

由于此方法一次仅存储一个id，因此这意味着只会显示一个模态。如果要同时显示更多模态，可以将其更改为数组或其他形式。

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

2 个答案: