繁体   English   中英

ReactJs:多次呈现的元素打开所有模态而不是仅子模态

[英]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>
    );
  }
}

奇怪的问题是,当我单击一个父元素中的按钮时,所有父元素的所有模式都会打开。

从逻辑上讲,我认为应该只打开该ChildModalParentElement

堆栈片段:

 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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM