@TatiNaumchuk

Как изменить код, чтобы на клике кнопки «Так» в модальном окне добавлялся товар, по которому сделан клик?

Учусь 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 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 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>
            </>
        );
    }
}
  • Вопрос задан
  • 87 просмотров
Пригласить эксперта
Ответы на вопрос 1
@omyraucy
Почему бы тебе не попробовать функциональные компоненты React? Это во-первых.
Во-вторых, попробуй функцию добавления товара сделать немного по-другому.
Пример:
У тебя есть state.
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>)}

Мы присвоили в modal объект order. Теперь просто пропишем условие, что modal будет появляться только тогда, когда он не равен пустому объекту.

{ Object.keys(modal) > 0 && <Modal data={modal} /> }


Смотрим, является ли объект пустым. Если да, то ничего не делаем. Если нет, то отображаем модальное окно.

Резюмируем: в state добавляем массив с товарами. Его потом перебираем через map и при клике меняем состояние modal с пустого объекта на элемент массива товара. Если клик не произошел, то модальное окно отображаться не будет.

Если надо сделать кнопку закрытия модального окна, то при нажатии кнопки можно просто сделать изменение состояние modal на пустой объект и оно будет закрываться.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
28 мар. 2024, в 21:17
5000 руб./за проект
28 мар. 2024, в 20:46
150000 руб./за проект
28 мар. 2024, в 20:37
50000 руб./за проект