Реквизиты, переданные функциональному компоненту, меняются автоматически? - PullRequest
Новая
       5

Реквизиты, переданные функциональному компоненту, меняются автоматически?

0 голосов
/ 31 августа 2018

Я работаю над экспериментальным проектом и пытался поиграться с javascript, когда столкнулся с этой странной вещью, которую я не могу объяснить его поведением. Я использую загрузчик 4 с CDN. SandboxCode 

import React from 'react';

const Button = props => {
  const showProps = e => {
    e.preventDefault();
    console.log(props.day, props.slot);
  };

  return (
    <div>
      <div data-toggle="modal" data-target="#myModal">
        Click Me!
      </div>

      <div className="modal fade" id="myModal">
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <h4 className="modal-title">Add / Edit Slot</h4>
              <button type="button" className="close" data-dismiss="modal">
                &times;
              </button>
            </div>

            <div className="modal-body">
              <form>
                <div className="form-group">
                  <label>
                    <h6>Faculty</h6>
                  </label>
                </div>
                <div className="form-group">
                  <label>
                    <h6>Venue</h6>
                  </label>
                </div>
                <div className="form-group">
                  <label>
                    <h6>Subject</h6>
                  </label>
                </div>
                <button
                  type="submit"
                  className="btn btn-success btn-cons btn-block"
                  onClick={showProps}
                >
                  Save
                </button>
              </form>
            </div>

            <div className="modal-footer">
              <button
                type="button"
                className="btn btn-danger btn-block"
                data-dismiss="modal"
              >
                Close
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Button;

этот компонент предоставляет кнопку, которая открывает модальное окно, когда внутри модального окна нажимается кнопка «Сохранить», а затем на два подпорки консоли (день и слот).

Его родительский компонент является основным компонентом, который затем используется в файле App.js для визуализации. 

import React, { Component } from "react";
import Button from "./Button/Button";

export default class Main extends Component {
  render() {
    return ["Monday", "Tuesday"].map((day, dayIndex) => {
      return [0, 1].map((slot, slotIndex) => {
        return (
          <Button key={dayIndex + "-" + slotIndex} day={day} slot={slotIndex} />
        );
      });
    });
  }
}

Исключенный результат: - После нажатия кнопки и нажатия кнопки сохранения в модальном режиме каждая кнопка должна содержать различные данные в зависимости от реквизита.

Вывод: - Все нажатия кнопки сохранения выводят одно и то же. Я застрял на этом два дня и много чего перепробовал.

1 Ответ

0 голосов
/ 31 августа 2018

Это проблема id :). Посмотрите на приведенный ниже код: 

<div data-toggle="modal" data-target="#myModal">

Сделайте id уникальным для каждого модального режима, в противном случае, независимо от того, какую кнопку вы нажмете, он вызовет модальный элемент для первого найденного элемента с указанным идентификатором.

Смотрите фиксированный код в этой песочнице , в основном изменили эти две строки, чтобы обеспечить уникальный модальный идентификатор: 

<div data-toggle="modal" data-target={`#myModal_${props.day}_${props.slot}`}>

И 

<div className="modal fade" id={`myModal_${props.day}_${props.slot}`}>
...