Лучший способ показать дочерний модал на карте? - PullRequest
Новая
       25

Лучший способ показать дочерний модал на карте?

0 голосов
/ 30 января 2019

Ссылка на проект: 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}...

Снимок экрана:

enter image description here

Мне бы хотелось, чтобы при каждом нажатии кнопки появлялось различное модальное окно («Информация»).

Как это выглядит в настоящее время, все работает как оноследует, за исключением того, что отображается только последний модальный элемент (их 6) независимо от того, какую кнопку «Инфо» я выбираю:

enter image description here

Я использую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>

Есть ли способ сделать это без использования порталов или Redux?

1 Ответ

0 голосов
/ 30 января 2019

Вместо того, чтобы переключать модалы с помощью true или false в состоянии, используйте идентификатор модалов, чтобы отслеживать, какой модальный режим открыт.Я отредактировал чек вашего проекта в https://repl.it/repls/SeveralTragicStaff

...