动态改变react模式内容

IT技术 javascript reactjs react-modal
2021-05-12 05:44:53

我有react模式的问题。我有一个列表，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});
}
2个回答

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

我要做的是将一个函数附加到 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

所以我的理解是你渲染了 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. 
        />

模态组件的第三步我相信它是无状态功能组件。最初在 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>}
其它你可能感兴趣的问题
上一篇MUI 组件的类型中缺少 Typescript Material UI 属性“类” 下一篇Webpack / React.js 中的语法错误 React 中的意外令牌 = { }