Question

我对react-modal有疑问。我有SingleElement列表，点击后它应该出现模态窗口，其中包含点击元素的更多详细信息。带数据的JSON存储为状态，从Modal内部我找不到获取所需元素的方法。

这是render()函数中的模态：

        <Modal
            isOpen={this.state.modalIsOpen}
            onAfterOpen={this.afterOpenModal}
            onRequestClose={this.closeModal}
            chosenBeer={this.state.chosenBeer}
        >
            <h2> == Dynamically changing title of element == </h2>
            <button onClick={this.closeModal}>X</button>
            <img src="{ == Dynamically changing image == }" />
        </Modal>

        <div id="splashElements">
        {
            this.state.elements &&
            this.state.elements.map((item, index) => {
                return(<SingleElement key={index} name={item.name} href={item.href} image={item.image_url} tagline={item.tagline} onDelete={id => this.onDelete(index)} openModal={elementId => this.openModal(index)}/>)
            })
        }
        </div>

以下是负责显示/隐藏模态窗口的方法：

openModal = (beerId) => {
    this.setState({modalIsOpen: true, chosenBeer: this.state.beers[beerId]});
}

afterOpenModal = () =>{
    // references are now sync'd and can be accessed.
}

closeModal = () => {
    this.setState({modalIsOpen: false});
}

Answer 1

你可以这两个说。单击菜单项时，会创建一个将菜单项存储到状态的函数，然后模态可以直接从状态调用。

我要做的是，有一个附加到listItem的函数，它捕获所选项并将其发送到自定义可重用模态组件......

onClick={() => this.handleClick(item)}

handleClick(item) {
 //You would need to create a reusable modal component and import it.
return (
<ReusableModalComponent item={item}
)

}

然后在您的ReusableModalComponent中，您可以通过this.props.item.src ...等访问列表中的所有内容。

更新您的示例以使您的代码按原样运行...

this.state.elements.map((item, index) => {
            return(<SingleElement key={index} name={item.name} href={item.href} image={item.image_url} tagline={item.tagline} onDelete={id => this.onDelete(index)} openModal={elementId => this.openModal(index)} onClick={() => this.setState({itemToShow: item, modalIsOpen: !this.state.modalIsOpen}) />)
        })

然后，在你的模态中引用this.state.itemToShow.etc

Answer 2

所以我了解的是，您在state.elements中渲染了每个项目，每个<SingleElement/>组件都有一个按钮，单击该按钮后，您想打开模态将显示单个元素的值

看起来每个按钮都将使用openModal方法。使用这种方法，我们必须做两件事。首先更改this.state.modalIsOpen值，然后将动态值传递给模态主体。为此，首先，我将向您展示一个JavaScript魔术。在javascript

    !!undefined=false
    !!anystring=true  // pretty clear I believe

因此第一步，应像这样设置this.state.modalIsOpen:undefined。魔术将从第三步开始。

第二步，您必须将此值传递给singleModal组件。在您的父组件中，您还将渲染一个包含Modal的组件，因此我将其命名为**singleModal**.

        <singleModal
          modalIsOpen={this.state.modalIsOpen} //i just show the related prop here. 
        />

我认为它是无状态功能组件，这是Modal组件的第三步。最初处于状态modalIsOpen的值为undefined.，因此使用JavaScript魔术!!props.modalIsOpen的值设置为false。所以没有模态出现。

第四步，openModal方法激活模态。

    openModal = (beerId) => {
    this.setState({modalIsOpen:this.state.elements[beerId] ,    chosenBeer:this.state.beers[beerId]});
      }

这是事情，因为我不知道您应用的布局，所以我假设BeerId与每个<SIngleElement key={} />中的 key id值相同。所以我将单个元素拉到this.state.elements中。

这是魔术的第二部分。我将modalIsOpen设置为this.state.elements[beerId]。请记住，此值是我们为Modal组件内部的isOpen prop设置的。

           <Modal
            isOpen={!!props.modalIsOpen}
          />

这次props.modalIsOpen=this.state.elements[beerId]是一个字符串。因此!!props.modalIsOpen将为 true ，并且您的模式将打开。

最后一步，现在位于模式

    {props.modalIsOpen && <p>{props.modalIsOpen}</p>}

动态改变反应模态内容

2 个答案: