Question

链接到项目：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}...

屏幕截图：

我希望每次单击按钮（“信息”）时都会显示不同的模式。

目前看来，无论我选择哪个“信息”按钮，只有最后一个模式项（有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

使用模态ID跟踪打开哪个模态，而不是通过在状态中使用true或false来切换模态。我已经在https://repl.it/repls/SeveralTragicStaff

中编辑了您的项目检查

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

1 个答案: