Как изменить код, чтобы на клике кнопки «Так» в модальном окне добавлялся товар, по которому сделан клик?
Учусь React, помогите пожалуйста
class App extends Component { state = { data: [], cards: [], carts: [], favoriteCards: [], isModalOpen: false, isButton: true, modalProps: {}, }; addToCarts = card => { this.setState(current => { const carts = [...current.carts]; const index = carts.findIndex(el => el.article === card.article); if (index === -1) { carts.push({ ...card, count: 1 }); } else { carts[index].count += 1; } return { carts }; }); }; toggleModal = value => { this.setState({ isModalOpen: value }); }; render() { const { cards, carts, isModalOpen } = this.state; return ( <> <Header carts={carts} favoriteCards={favoriteCards} /> <main> <section className={styles.leftContainer}> <CardsContainer cards={cards} isModalOpen={isModalOpen} toggleModal={this.toggleModal} /> </section> <section className={styles.rightContainer}> <h2>Корзина</h2> <CartContainer carts={carts} /> </section> <Modal isModalOpen={isModalOpen} toggleModal={this.toggleModal} background="#ff4d4d" header={'Ви хочете додати цей товар у корзину?'} closeButton={true} cards={cards} carts={carts} addToCarts={this.addToCarts} /> </main> </> ); } } |
class App extends Component { state = { data: [], cards: [], carts: [], favoriteCards: [], isModalOpen: false, isButton: true, modalProps: {}, }; addToCarts = card => { this.setState(current => { const carts = [...current.carts]; const index = carts.findIndex(el => el.article === card.article); if (index === -1) { carts.push({ ...card, count: 1 }); } else { carts[index].count += 1; } return { carts }; }); }; toggleModal = value => { this.setState({ isModalOpen: value }); }; render() { const { cards, carts, isModalOpen } = this.state; return ( <> <Header carts={carts} favoriteCards={favoriteCards} /> <main> <section className={styles.leftContainer}> <CardsContainer cards={cards} isModalOpen={isModalOpen} toggleModal={this.toggleModal} /> </section> <section className={styles.rightContainer}> <h2>Корзина</h2> <CartContainer carts={carts} /> </section> <Modal isModalOpen={isModalOpen} toggleModal={this.toggleModal} background="#ff4d4d" header={'Ви хочете додати цей товар у корзину?'} closeButton={true} cards={cards} carts={carts} addToCarts={this.addToCarts} /> </main> </> ); } }
class Modal extends PureComponent { render() { const { header, closeButton, background, isModalOpen, toggleModal, cards, addToCarts, } = this.props; if (!isModalOpen) { return null; } return ( <> <div className={styles.wrapper} style={{ background }}> <div className={styles.header}> <h2 className={styles.headerText}>{header}</h2> {closeButton && ( <button className={styles.closeBtn} onClick={() => { toggleModal(); }} > X </button> )} </div> <div className={styles.body}> <div className={styles.bodyBtn}> <button className={styles.button} onClick={() => { addToCarts(...cards); toggleModal(); }} > ТАК </button> <button className={styles.button} onClick={() => { toggleModal(); }} > НІ </button> </div> </div> </div> </> ); } } |
class Modal extends PureComponent { render() { const { header, closeButton, background, isModalOpen, toggleModal, cards, addToCarts, } = this.props; if (!isModalOpen) { return null; } return ( <> <div className={styles.wrapper} style={{ background }}> <div className={styles.header}> <h2 className={styles.headerText}>{header}</h2> {closeButton && ( <button className={styles.closeBtn} onClick={() => { toggleModal(); }} > X </button> )} </div> <div className={styles.body}> <div className={styles.bodyBtn}> <button className={styles.button} onClick={() => { addToCarts(...cards); toggleModal(); }} > ТАК </button> <button className={styles.button} onClick={() => { toggleModal(); }} > НІ </button> </div> </div> </div> </> ); } }
class CardsContainer extends Component { render() { const { cards, addToCarts, toggleModal } = this.props; return ( <> <ul className={styles.list}> {cards.map(({ name, prise, url, article, color, isFavorite }) => ( <li key={article}> <CardItem name={name} prise={`Ціна: ${prise}`} url={url} article={`Артикул: ${article}`} color={`Колір: ${color}`} setCardFavorite={setCardFavorite} isFavorite={isFavorite} addToCarts={addToCarts} toggleModal={toggleModal} setModalProps={setModalProps} /> </li> ))} </ul> </> ); } } |
class CardsContainer extends Component { render() { const { cards, addToCarts, toggleModal } = this.props; return ( <> <ul className={styles.list}> {cards.map(({ name, prise, url, article, color, isFavorite }) => ( <li key={article}> <CardItem name={name} prise={`Ціна: ${prise}`} url={url} article={`Артикул: ${article}`} color={`Колір: ${color}`} setCardFavorite={setCardFavorite} isFavorite={isFavorite} addToCarts={addToCarts} toggleModal={toggleModal} setModalProps={setModalProps} /> </li> ))} </ul> </> ); } }
class CardItem extends PureComponent { render() { const { name, prise, url, article, color, toggleModal, } = this.props; return ( <> <div className={styles.card}> <button type="button" className={styles.btn} onClick={() => { setCardFavorite(url); }} > <img className={styles.likeButton} src={!isFavorite ? star : starFill} alt="favorite" /> </button> <h4 className={styles.name}>{name}</h4> <img src={url} alt={name} className={styles.img} /> <h5 className={styles.prise}>{prise}</h5> <h5 className={styles.article}>{article}</h5> <h5 className={styles.color}>{color}</h5> <div className={styles.btnContainer}> <Button text="Додати у корзину" backgroundColor="#ff4d4d" onClick={() => { toggleModal(true); }} /> </div> </div> </> ); } } |
class CardItem extends PureComponent { render() { const { name, prise, url, article, color, toggleModal, } = this.props; return ( <> <div className={styles.card}> <button type="button" className={styles.btn} onClick={() => { setCardFavorite(url); }} > <img className={styles.likeButton} src={!isFavorite ? star : starFill} alt="favorite" /> </button> <h4 className={styles.name}>{name}</h4> <img src={url} alt={name} className={styles.img} /> <h5 className={styles.prise}>{prise}</h5> <h5 className={styles.article}>{article}</h5> <h5 className={styles.color}>{color}</h5> <div className={styles.btnContainer}> <Button text="Додати у корзину" backgroundColor="#ff4d4d" onClick={() => { toggleModal(true); }} /> </div> </div> </> ); } }
Дополнительно:
Ответы:
Почему бы тебе не попробовать функциональные компоненты React? Это во-первых.
Во-вторых, попробуй функцию добавления товара сделать немного по-другому.
Пример:
У тебя есть state.
const state = { cart: [], orders: [], modal: {} } // я буду писать, отталкиваясь от объектного React, чтобы было удобнее читать, но если будут ошибки - сори. /* cart - массив с корзиной. В ней хранятся все товары. orders - массив товаров в ассортименте. */ |
const state = { cart: [], orders: [], modal: {} } // я буду писать, отталкиваясь от объектного React, чтобы было удобнее читать, но если будут ошибки - сори. /* cart - массив с корзиной. В ней хранятся все товары. orders - массив товаров в ассортименте. */
Зададим примерную структуру товара:
В товаре будут следующие поля: id, title (название), description (описание), price (цена), pic (изображение).
Теперь выводим товар. Завернем его в некий div.
Распаковываем массив orders. { this.state.orders.map((ord, index) => <div onClick={setState(modal = ord)} key={index} className="order">/*тут распихиваешь другие поля (id, price и т.д.)*/</div>)} |
Распаковываем массив orders. { this.state.orders.map((ord, index) => <div onClick={setState(modal = ord)} key={index} className="order">/*тут распихиваешь другие поля (id, price и т.д.)*/</div>)}
Мы присвоили в modal объект order. Теперь просто пропишем условие, что modal будет появляться только тогда, когда он не равен пустому объекту.
{ Object.keys(modal) > 0 && <Modal data={modal} /> } |
{ Object.keys(modal) > 0 && <Modal data={modal} /> }
Смотрим, является ли объект пустым. Если да, то ничего не делаем. Если нет, то отображаем модальное окно.
Резюмируем: в state добавляем массив с товарами. Его потом перебираем через map и при клике меняем состояние modal с пустого объекта на элемент массива товара. Если клик не произошел, то модальное окно отображаться не будет.
Если надо сделать кнопку закрытия модального окна, то при нажатии кнопки можно просто сделать изменение состояние modal на пустой объект и оно будет закрываться.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы реализовать функционал добавления товара по клику на кнопку "Так" в модальном окне, вам необходимо выполнить следующие шаги:
1. Добавить атрибут data-id к кнопке "Так" с идентификатором товара, по которому был сделан клик.
2. Создать функцию, которая будет обрабатывать клик на кнопке "Так" и получать идентификатор товара.
3. Найти информацию о товаре по его идентификатору и добавить его в корзину или в список выбранных товаров.
Пример кода на PHP:
<button class="add-to-cart" data-id="123">Так</button> document.querySelector('.add-to-cart').addEventListener('click', function() { var productId = this.getAttribute('data-id'); // Здесь можно выполнить AJAX запрос к серверу для получения информации о товаре по его идентификатору // Например, получить информацию из базы данных // После получения информации добавить товар в корзину или список выбранных товаров });
В данном примере, при клике на кнопку с классом "add-to-cart" будет вызвана функция, которая получит идентификатор товара и далее можно выполнить запрос к серверу для получения информации о товаре по этому идентификатору. После этого можно добавить товар в корзину или в список выбранных товаров.
Таким образом, вы сможете реализовать функционал добавления товара по клику на кнопку "Так" в модальном окне.