时间戳

首页 > 解决方案 > 我的模态触发器通过 id 呈现所有模态而不是特定模态

javascript - 我的模态触发器通过 id 呈现所有模态而不是特定模态

问题描述

我有一个 antd 表，其中包含一个弹出模式的视图更多图标。该图标应该根据表格上该特定行的 id 和详细信息呈现每个模式，但目前，每个图标只是将所有模式呈现在彼此之上

const ViewUpload = props => {
    const { visible, onCancel, data, onOk } = props;

    return (
        <>
            {
                data.map(({ description, id, url, title }) => (
                    <Modal
                        key={id}
                        visible={visible}
                        closable={false}
                        onCancel={onCancel}
                        title={title}
                        onOk={onOk}
                    >
                        <Card
                            cover={(
                                <video className="uploaded-video" controls>
                                    <source src={url} />
                                    <track src="name" kind="captions" />
                                </video>
                                )}
                        >
                            <Meta title={title} description={description} />
                        </Card>
                    </Modal>
                ))
            }
        </>
    );
};

然后在呈现我拥有的模态的组件内部

<ViewUpload
    visible={preview}
    onCancel={() => setPreview(false)}
    data={videos}
    onOk={() => setPreview(false)}
/>

该组件内部触发模态的按钮

<Tooltip placement="top" title="View details">
    <Button
        onClick={() => setPreview(true)}
        type="link"
        icon="eye"
    />
</Tooltip>

标签： javascriptreactjsantd

解决方案

好吧，似乎查看更多按钮将“预览”状态设置为“真”，并且所有模式“可见”道具都等于“预览”状态的值，因为您将“预览”状态作为“可见”道具传递给查看上传。因此，当您单击查看更多按钮时，它将“预览”状态设置为 true 并将其传递给 ViewUpload 组件，并且所有模式都在监听该状态，因此变得可见！

因此，如果您希望模态监听特定按钮，第一种方法是将模态从 viewUpload 组件和数据循环中取出，或者第二种方法是将选定的模态 id 传递给 viewUpload

我不知道显示更多按钮可以访问单击行的 id，但如果它在循环中，请执行此更改

<Button
  onClick={() => setSelectedModal(modal.id)}
  type="link"
  icon="eye"
/>

所以按钮会将模态ID置于名为'selectedModal'的状态

然后像这样传下去

<ViewUpload
  selectedModal={selectedModal}
  onCancel={() => setSelectedModal(null)}
  data={videos}
  onOk={() => setSelectedModal(null)}
/>

以及 ViewUpload 组件的最终更改

// some codes
const { selectedModal, onCancel, data, onOk } = props;
// some other codes
<Modal
   key={id}
   visible={selectedModal === id}
   closable={false}
   onCancel={onCancel}
   title={title}
   onOk={onOk}
>

推荐阅读