React:如何仅显示该特定div的模式弹出窗口 [英] React : How to display a modal popup only for that specific div
问题描述
更明确地说，基本上我想做的就是像Amazon
To make it more clear , basically what I'm trying to do is like Amazon
会有很多产品，一旦您单击该产品，只有该产品及其详细信息将显示在弹出窗口中.
There will be a bunch of products and once you click on the product ,Only that product and its details will be displayed on the Popup Modal.
在我的情况下，我已将3个数据存储在一个数组中，并将其映射出来，从而创建了3div和3Modal Popup，每个按钮均带有按钮.
In my case , I have stored 3 data in an Array, I have mapped it out Which creates 3div and 3Modal Popup with buttons in each.
一旦我点击了第一个div的按钮，我希望模式仅针对该第一个div打开.
Once I click on the button of 1st div , I want the modal to be open for that first div only.
但是现在，当我单击按钮上的所有3 Modal Popup时.
But right now when I click on the button all 3 Modal Popup.
我是React的新手，我可以在JQuery和Javascript中做同样的事情，但是我无法在React中实现.
I'm new to React , I can do this same thing in JQuery and Javascript, But I'm not able to achieve this in React.
或者有更好的方法吗?就像循环而不是创建3modal弹出窗口一样，我们可以只创建一个模式弹出窗口吗?它将显示单击哪个按钮的特定div的数据?
Or is there a better approach to this ? Like rather than looping and creating 3modal popup Can we create just one modal popup, That will display the data of the particular div of which button is being clicked?
我当前的代码:
App.js，我在其中创建数组的地方
App.js , Where i have created the Array
Product.Js，它被映射到3div中并且还具有模式弹出窗口
Product.Js Where its being mapped out into 3div and also has the modal popup
让我知道你们是否需要更多细节
Let me know if you guys need more details
谢谢你们.
使用数组中的数据动态创建的3 Div
3 Div that is being dunamically created with the data from array
但是当我单击任何按钮时，会弹出所有div的弹出窗口，这就是问题
But when i Click on any button , popup for all div pops up , Thats the issue
推荐答案
当然，所有模态将同时弹出.所有模态都使用完全相同的状态，即this.state.showModal.一旦得到true，所有内容都会弹出.如果您仍然喜欢这样的3个模态.我建议您使用JSON值使showModal状态的值.也许是这样的:
Of course, all modal will pop up at the same time. All modal using exactly same state which is this.state.showModal. Once it gets true then all will just pop up. If you still like to have 3 modals like that. I suggest you to make the value of showModal state with JSON value. Maybe something like this:
state = {
showModal: {}
}
然后使用getModal()功能:
getModal = value => {//still using variable from `data.id`
let key_to_update = {};
key_to_update[value] = true;
this.setState( {
showModal: Object.assign( {}, this.state.showModal, key_to_update )
} );
}
然后对于<Modal/>应该看起来像这样:
Then for the <Modal/> should looks like this:
<Modal show={this.state.showModal[data.id]} onClick={()=> this.hideModal(data.id)}/>
要隐藏模态，可以对getModal()做相反的操作，如下所示:
To hide the modal you can do opposite of getModal() as follow:
hideModal = value => {//still using variable from `data.id`
let key_to_update = {};
key_to_update[value] = false;//Just different on this
this.setState( {
showModal: Object.assign( {}, this.state.showModal, key_to_update )
} );
}
如果您仍然有兴趣并在实施时遇到问题，我可以帮助您创建一个有效的演示.因为我并不是真正的测试代码，所以请根据我的经验和快速分析来进行编写.但是，就我个人而言，我喜欢针对这种情况使用一个Modal.只需在产品详细信息"中设置一个状态"，然后从单个Modal中读取该状态"，然后同时显示它即可.
If you still interested and have a problem to implement it, I can help you create a working demo. Because I am not really test the code, just make it based on my experience and quick analysis. However, personally, I like to have a single Modal for this kind of case. Just set a single "state" of "Product detail" then read that "state" from single Modal then show it at the same time.
====演示:多种模态元素技术=====
就像您的评论一样，因为您一次只需要显示一个模态，那么它会容易得多.我们不需要像上面那样有多个true/false条件.我们可以使用data.id作为对showModal状态的正确/错误检查，如下所示:
Just like your comment, because you only need to show single modal at a time, then it will be much easier. We don't need to have multiple true/false condition like above. We can just use data.id as the true/false check to the showModal state like follow:
class Product extends Component {
state = {
showModal: 0
};
getModal = value => {
this.setState({ showModal: value });
};
hideModal = value => {
this.setState({ showModal: 0 });
};
render() {
return (
<div className="container">
{this.props.data.map((data, key) => (
<div key={key} className="small">
<p>Namsse: {data.name}</p>
<button onClick={() => this.getModal(data.id)}>Popup</button>
<Modal
show={this.state.showModal === data.id}
onHide={() => this.hideModal(data.id)}
name={data.name}
/>
</div>
))}
</div>
);
}
}
正在运行的演示: https://codesandbox.io/s/pkjvy72mw0
===演示:单模态元素技术===
===DEMO: SINGLE MODAL ELEMENT TECHNIQUE===
您还可以只具有一个<Modal/>元素，如下所示:
You can also have only single <Modal/> element just like below:
class Product extends Component {
state = {
showModal: false,
dataModal: {
name: ""
}
};
getModal = data => {
this.setState({ showModal: true, dataModal: data });
};
hideModal = () => {
this.setState({ showModal: false });
};
render() {
return (
<div className="container">
{this.props.data.map((data, key) => (
<div key={key} className="small">
<p>Namsse: {data.name}</p>
<button onClick={() => this.getModal(data)}>Popup</button>
</div>
))}
<Modal
show={this.state.showModal}
onHide={this.hideModal}
name={this.state.dataModal.name}
/>
</div>
);
}
}
正在运行的演示: https://codesandbox.io/s/53x7m726xk
这篇关于React:如何仅显示该特定div的模式弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
