Question

我在文章HTML标签中列出了诗歌标题和图像。每当用户单击文章时，我都希望有一个模态来显示诗句。到目前为止，每当单击一篇文章时，每首诗的情态都会打开。如何一次打开一个模态？这是我第一次使用React。

链接到我的代码和框：

https://codesandbox.io/s/and-air-52dpo?fontsize=14

Answer 1

您需要将每个Poem卡分离为一个组件，并将状态放入其中。通过像在父级组件上那样使用状态，会导致所有诗歌卡都依赖相同的状态。

我已经分叉了您的密码和密码箱，并进行了修复。您可以检查一下。

https://codesandbox.io/embed/and-air-543tl

Answer 2

您正在show组件中使用单个Poems变量。
这不允许只显示一个模态，因为所有模态都引用了相同的变量。

我会在Poems状态下使用整数-而不是布尔值show-存储当前显示的模式。
此整数的最佳选择可能是诗歌索引，如map函数的you should anyway add：

const listItems = data.map((poem, index) => (
    <React.Fragment key={index}>
        // The rest of your code is the same

        <Modal
          show={this.state.currentModal === index} // only this property was updated
          onClose={this.showModal}
          title={poem.title}
        >
            // modal code
        </Modal>
    </React.Fragment>
))

单击时进行条件渲染

2 个答案: