当然,所有的模态框都会同时弹出。所有模态都使用完全相同的状态,即this.state.showModal
。一旦得到true
然后一切都会弹出。如果你仍然喜欢这样的 3 个模态框。我建议你把价值showModal
带有 JSON 值的状态。也许是这样的:
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/>
应该看起来像这样:
<Modal show={this.state.showModal[data.id]} onClick={()=> this.hideModal(data.id)}/>
要隐藏模式,您可以执行相反的操作getModal()
如下:
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 )
} );
}
如果您仍然感兴趣并且在实现它时遇到问题,我可以帮助您创建一个工作演示。因为我并没有真正测试代码,只是根据我的经验和快速分析来编写它。然而,就我个人而言,我喜欢针对这种情况使用单个模态。只需设置“产品详细信息”的单个“状态”,然后从单个模态中读取该“状态”,然后同时显示它。
==== 演示:多模态元素技术 =====
就像你的评论一样,因为你只需要一次显示单个模态,那么就会容易得多。我们不需要像上面那样有多个真/假条件。我们可以使用data.id
作为真/假检查showModal
状态如下:
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 https://codesandbox.io/s/pkjvy72mw0
===演示:单模态元素技术===
您也可以只拥有一个<Modal/>
元素如下所示:
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 https://codesandbox.io/s/53x7m726xk