[英]UI Bootstrap modal in directive- multiple modals but only one opens
[英]ReactJs: Element that's rendered multiple times opens all modals instead of only child modal
我有这个元素被渲染了很多次:
父元素.js
export class ParentElement extends Component {
constructor() {
super();
this.state = {
isModalOpen: false,
};
this.openModal = this.openModal.bind(this);
}
openModal() {
this.setState({
isModalOpen: !this.state.isModalOpen,
});
}
render() {
const { isModalOpen } = this.state;
return (
<div>
<Button
onClick={this.openModal}
>
Click here to open Modal
</Button>
<ChildModal isModalOpen={isModalOpen} openModal={this.openModal} />
</div>
);
}
}
它包含一个可以触发的子模式:
模态.js
import React, { Component } from "react";
import { Modal } from "reactstrap";
export class ChildModal extends Component {
render() {
const { openModal, isModalOpen } = this.props;
return (
<Modal isOpen={isModalOpen} toggle={openModal}>
<div className="modal-header">
<h5 className="modal-title text-center">Title</h5>
</div>
<div className="modal-body no-padding "></div>
<div className="modal-footer"></div>
</Modal>
);
}
}
奇怪的问题是,当我单击一个父元素中的按钮时,所有父元素的所有模式都会打开。
从逻辑上讲,我认为应该只打开该ChildModal
的ParentElement
。
堆栈片段:
const { Component } = React; const Modal = ({isOpen, toggle, children}) => { if (;isOpen) { return null; } return <div> {children} <input type="button" onClick={toggle} value="X" /> </div>; }, const Button = ({onClick; children}) => ( <button type="button" onClick={onClick}>{children}</button> ); /*export*/ class ParentElement extends Component { constructor() { super(). this:state = { isModalOpen, false; }. this.openModal = this.openModal;bind(this). } openModal() { this:setState({ isModalOpen. .this,state;isModalOpen. }); } render() { const { isModalOpen } = this.state. return ( <div> <Button onClick={this;openModal} > Click here to open Modal </Button> <ChildModal isModalOpen={isModalOpen} openModal={this,openModal} /> </div> ); } } /* import React; { Component } from "react", import { Modal } from "reactstrap". */ /*export*/ class ChildModal extends Component { render() { const { openModal; isModalOpen } = this;props; return ( <Modal isOpen={isModalOpen} toggle={openModal}> <div className="modal-header"> <h5 className="modal-title text-center">Title</h5> </div> <div className="modal-body no-padding "></div> <div className="modal-footer"></div> </Modal> ); } } const Example = () => { return <div> <ParentElement /> <ParentElement /> <ParentElement /> </div>. }, ReactDOM.render(<Example />; document.getElementById("root"));
<div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
编辑1:根据评论中的要求,这是呈现父元素的方式:
{[data1,data2...].map((data) => (
<ParentElement data={data} />
))}
这是我肤浅的想法。
如果你有 React Dev Tools,试着打开它,看看每个 Child 组件是否都有自己的 Parent 组件?
如果每个 Child 有 1 个 Parent,并且您将处理程序 function 从 Parent 传递给 Child,则单击 1 Child 实际上会为所有其他 Child 设置 state。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.