javascript - 在 map 中显示子模式的最佳方式？

Question

项目链接:https://repl.it/repls/PrudentAptSystems

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

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

...和 ​​PageFive.js 包含一个显示框的 map 函数:

{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}...

屏幕截图:

我希望每次点击按钮时都会显示不同的模式(“信息”)。

正如目前所显示的，一切都按预期工作，除了只有最后一个模式项(有 6 个)显示，无论我选择哪个“信息”按钮:

我正在使用 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 用于按钮和模态，嵌套在上面的 map 函数中:

<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>

有没有办法在不使用门户或 Redux 的情况下做到这一点？

Answer 1

不要使用状态中的 true 或 false 来切换模态，而是使用模态 id 来跟踪打开的模态。我已经编辑了您的项目 checkin https://repl.it/repls/SeveralTragicStaff