Как сделать модальные окна для карточек товаров?

Question

[evg_96]

Есть каталог товаров. У каждого товара есть кнопка "Подробнее". Как сделать по нажатию кнопки вывод модального окна с информацией конкретно об этом товаре?
Понятно как вывести модальное окно прям в карточке, тогда легко передать информацию о продукте, но непонятно как открыть модальное окно в центре экрана, и также передать информацию о продукте, не понятно как это все организовать...
И вообще как делают модальные окна на реакте?
Структура каталога:
--- Catalog (сетка товаров)
--- --- Card (отдельно один товар)

PS. Поставил react-modal. В каталоге в цикле вывел массив модалок. Но это работает не так как нужно... В любом случае открывается окно с информацией о последнем товаре.
Как сделать чтобы у каждого окна была информация о том товаре на каком вызвали это окно?

const customStyles = {
  content : {
    top                   : '50%',
    left                  : '50%',
    right                 : 'auto',
    bottom                : 'auto',
    marginRight           : '-50%',
    transform             : 'translate(-50%, -50%)'
  }
};

class PizzaCatalog extends React.Component {
  constructor() {
    super();

    this.state = {
      modalIsOpen: false
    };

    this.openModal = this.openModal.bind(this);
    this.afterOpenModal = this.afterOpenModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  componentDidMount() {
    this.props.fetchAll();
  }

  openModal() {
    this.setState({
      modalIsOpen: true
    });
  }

  afterOpenModal() {
    this.subtitle.style.color = '#f00';
  }

  closeModal() {
    this.setState({
      modalIsOpen: false
    });
  }

  render() {
    return (
      <div>
        <Carousel />
        <h1>Каталог товаров</h1>
        <hr/>
        <div className="wrapper">
            {
              this.props.catalog.map(product => (
                <Card
                  className="col"
                  key={product.name}
                  addedToCart={this.props.checkIsProductAddedToCart(product.uid)}
                  product={product}
                  handleClick = { this.openModal }
                />
              ))
            }
            {
              this.props.catalog.map(product => (
                <Modal
                  isOpen={this.state.modalIsOpen}
                  onAfterOpen={this.afterOpenModal}
                  onRequestClose={this.closeModal}
                  style={customStyles}
                  contentLabel="Example Modal"
                >

                  <h2 ref={subtitle => this.subtitle = subtitle}>{ product.name }</h2>
                  <button onClick={this.closeModal}>close</button>
                  <div>I am a modal</div>
                  <form>
                    <input />
                  </form>

                </Modal>
              ))
            }
          </div>
      </div>
    );
  }
}

Answer 1

[Максим]

React-modal хорошая библиотека, ничего лишнего, я бы рекомендовал оставить ее.
Как сделать модалку:
на том уровне, где у вас отрисовывается каталог, или даже выше - вы рисуете модальное окно и ему передаете признак, по которому оно открыто, например: isProductModalOpen (true / false). Этот код находится в "контейнере", приконекченном к redux.

Далее при клике на кнопку подробнее, вы бросаете экшен OPEN_PRODUCT_MODAL + айдишник товара (который будете запрашивать с сервера) или + всю инфу о товаре, если она у вас уже есть и вам ничего не нужно запрашивать.

Редьюсер, отвечающий за модальные окна принимает этот экшен и обрабатывает. В частности устанавливает значение, на которое вы опираетесь в контейнере и делаете true для флага isProductModalOpen

По закрытию модалки - так же улетает экшен, который обрабатывается в редьюсере и признак isProductModalOpen ставится равным false.

Готово!

Такой подход позволяет делать несколько модальных окон разных типов.

Comments

[evg_96]

Максим Честно мало что понял.
Получается нужно рендерить модальное окно в самом каталоге. Это вроде ясно.
На счет флага, он должен находиться в редакс сторе или храниться локально в компоненте каталога как в примере который я указывал?
Получается нужно при клике на кнопку подробнее вызывать что то подобное:?

export function openModal(product) {
  return dispatch => {
    dispatch({
      type: OPEN_PRODUCT_MODAL,
      product
    });
  };
}

// ...
case OPEN_PRODUCT_MODAL: {
  return state.setIn(["catalog", "isProductModalOpen"], true);
  // И тут же в стор ложить открытый продукт, который потом в connect будет запрашиваться из стора и передаваться в модальное окно?
}
// ...

И тоже самое сделать для закрытия модального окна как я понял.
Правильно? или что то не так я понял и нужно как то по другому сделать

[Максим]

evg_96, думаю правильно. Суть реализации в том, что нужно где-то на верхнем уровне положить react-modal и делать его видимым/не видимым.

[Максим]

evg_96, флаг хранится в сторе, и заодно вместо флага можно хранить имя модалки (если хотите в будущем разные модалки показывать)