在地图中显示子模态的最佳方式？

Question

Link 到项目：https://repl.it/repls/PrudentAptSystems

我有 App.js 和 PageFive.js。 App.js 包含一个数组：

state = {
    boxes: [
      {
        cbIndex: "cb1",
        name: "Bob"
      },
      {
        cbIndex: "cb2",
        name: "Daniel"
      },...

...并且 PageFive.js 包含显示框的地图函数：

{this.props.boxes.map((box, id, image, moduleId) => (
            <div key={id} className="col-md-6 col-lg-4">
              <div className="sample-container">
                <div className="container">
                 <div className="row">
                  <div className="col-md-12">
                    <ul>
                      <li>
                        <input
                          type="checkbox"
                          id={box.cbIndex}...

屏幕截图：

我希望每次单击按钮时显示不同的模式 ("Info")。

目前看来，一切正常，除了最后一个模式项（有 6 个）显示，无论哪个 "Info" 按钮我 select:

我正在使用 Reactstrap，其余代码如下所示：

(PageFive.js):

class PageFive extends Component {
  constructor(props) {
    super(props);

    this.state = {
      modal: false
    };

    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    this.setState({
      modal: !this.state.modal
    });
  }

用于按钮和模式的 JSX，嵌套在上面的地图函数中：

<Button color="danger" onClick={this.toggle.bind(this, moduleId)}>
{this.props.buttonLabel}
</Button>
<Modal
isOpen={this.state.modal}
toggle={this.toggle.bind(this, moduleId)}
className={this.props.className}
>
<ModalHeader toggle={this.toggle}>
    <p>hi </p>
</ModalHeader>
<ModalBody>
    Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.
</ModalBody>
<ModalFooter>
    <Button color="primary" onClick={this.toggle}>
    Do Something
    </Button>{" "}
    <Button
    color="secondary"
    onClick={this.toggle}
    >
    Cancel
    </Button>
</ModalFooter>

有没有不使用 portal 或 Redux 的方法来做到这一点？

Answer 1

与其在状态中使用 true 或 false 来切换模式，不如使用模式 id 来跟踪打开了哪个模式。我已经在 https://repl.it/repls/SeveralTragicStaff

中编辑了您的项目签到

在地图中显示子模态的最佳方式？

Best way to show child modal within a map?

javascript

reactjs

bootstrap-4

reactstrap