@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>
    );
  }
}
  • Вопрос задан
  • 152 просмотра
Решения вопроса 1
maxfarseer
@maxfarseer
реакт.рф, обучаю реакту и компании
React-modal хорошая библиотека, ничего лишнего, я бы рекомендовал оставить ее.
Как сделать модалку:
на том уровне, где у вас отрисовывается каталог, или даже выше - вы рисуете модальное окно и ему передаете признак, по которому оно открыто, например: isProductModalOpen (true / false). Этот код находится в "контейнере", приконекченном к redux.

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

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

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

Готово!

Такой подход позволяет делать несколько модальных окон разных типов.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы