动态变化的react-modal内容

Question

我对react-modal有问题。我有SingleElement的列表，点击后，它应该出现模式窗口与更多的细节被点击的元素。带有数据的JSON被存储为state，而从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...etc访问列表中的所有内容

更新您的示例，使您的代码按原样工作...

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. 
        />

模态组件的第三步，我认为它是无状态函数组件。在最初的状态中，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属性设置的。

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

这次是props.modalIsOpen=this.state.elements[beerId]，它是一个字符串。所以!!props.modalIsOpen将会是真的，你的模式将会打开。

最后一步，现在进入模式

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