1

我对反应模式有疑问。我有列表，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});
}
4

2 回答 2

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

于 2017-12-17T18:38:51.833 回答
0

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

看起来每个按钮都会使用 openModal 方法。使用这种方法，我们必须做两件事。首先更改this.state.modalIsOpen值并将动态值传递给模态体。为此，首先我将展示 ua 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 与 each 中的键id 值相同<SIngleElement key={} />。所以我将单个元素拉到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>}
于 2019-07-24T03:02:38.643 回答